ul li列表未正确对齐

Question

我使用ul li在中心位置列出缩略图和文本，但当我们向任何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>

​