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，他們以最快的

.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

試試這個你可以改變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>