Ul Li列表不适当的对准

Question

我已经使用ul li列出缩略图＆amp;文本处于中心位置，但是当我们在任何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

问题是您的Li的高度不同。.但是它们沿基线对齐。.您只是说vertical-align: top，它们在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>