ul liのリスティングが正しくありません

Question

私はul liをサムネイルのリストに使用しました&テキストは中央の位置にありますが、私たちはどんな李にもコンテンツを追加するときは、下の揃えになります。

使用されるコード： （..他のLiの位置が下のレベルに移動する参照、第二リチウムでいくつかのより多くのコンテンツを追加して、なぜそれが起こる？）

.our-team ul { 
 
    width: 100%; 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 
.our-team ul li { 
 
    display: inline-block; 
 
    padding: 0 5px; 
 
    margin-bottom: 20px; 
 
    width:25% 
 
} 
 
.our-team ul li img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    border: 4px solid #f2f2f2; 
 
} 
 
.our-team ul li section { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
figure { 
 
    margin: 0; 
 
    float: left; 
 
}

<div class="our-team"> 
 
    <ul class="list-6"> 
 
    <li> 
 
     <figure><img src="http://placehold.it/300x300"></figure> 
 
     <section><h3>Lorem ipsum dolor sit amet</h3> 
 
     <p>consectetur adipiscing elit</p></section> 
 
    </li> 
 
    <li> 
 
     <figure><img src="http://placehold.it/300x300"></figure> 
 
     <section><h3>sed do eiusmod tempor</h3> 
 
     <p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></section> 
 
    </li> 
 
    <li> 
 
     <figure><img src="http://placehold.it/300x300"></figure> 
 
     <section><h3>eiusmod tempor</h3> 
 
     <p>consectetur adipiscing elit</p></section> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

は、問題は、異なる高さのあなたの李のアール..ですが、彼らは..あなただけのvertical-align: topを言うのベースラインに沿って揃えていると、彼らはvertical-トップ

.our-team ul { 
 
    width: 100%; 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 
.our-team ul li { 
 
    display: inline-block; 
 
    padding: 0 5px; 
 
    margin-bottom: 20px; 
 
    width:25%; 
 
    vertical-align: top; /* this was added in answer */ 
 
    
 
} 
 
.our-team ul li img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    border: 4px solid #f2f2f2; 
 
} 
 
.our-team ul li section { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
figure { 
 
    margin: 0; 
 
    float: left; 
 
}

<div class="our-team"> 
 
<ul class="list-6"> 
 
<li> 
 
<figure><img src="http://placehold.it/300x300"></figure> 
 
<section><h3>Lorem ipsum dolor sit amet</h3> 
 
<p>consectetur adipiscing elit</p></section> 
 
</li> 
 
<li> 
 
<figure><img src="http://placehold.it/300x300"></figure> 
 
<section><h3>sed do eiusmod tempor</h3> 
 
<p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></section> 
 
</li> 
 
<li> 
 
<figure><img src="http://placehold.it/300x300"></figure> 
 
<section><h3>eiusmod tempor</h3> 
 
<p>consectetur adipiscing elit</p></section> 
 
</li> 
 

 
</ul> 
 
</div>

Answer 2

この1にあなたを試してみてくださいdisplay: inline-block;

flot:left;から

.our-team ul { 
 
    width: 100%; 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 
.our-team ul li { 
 
    float: left; 
 
    padding: 0 5px; 
 
    margin-bottom: 20px; 
 
    width:25% 
 
} 
 
.our-team ul li img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    border: 4px solid #f2f2f2; 
 
} 
 
.our-team ul li section { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
figure { 
 
    margin: 0; 
 
    float: left; 
 
}

<div class="our-team"> 
 
<ul class="list-6"> 
 
<li> 
 
<figure><img src="http://placehold.it/300x300"></figure> 
 
<section><h3>Lorem ipsum dolor sit amet</h3> 
 
<p>consectetur adipiscing elit</p></section> 
 
</li> 
 
<li> 
 
<figure><img src="http://placehold.it/300x300"></figure> 
 
<section><h3>sed do eiusmod tempor</h3> 
 
<p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></section> 
 
</li> 
 
<li> 
 
<figure><img src="http://placehold.it/300x300"></figure> 
 
<section><h3>eiusmod tempor</h3> 
 
<p>consectetur adipiscing elit</p></section> 
 
</li> 
 

 
</ul> 
 
</div>

を変更することができます