Question

我用过ul li来列出缩略图＆amp;文本位于中心位置，但是当我们向任何li添加更多内容时，其他人会对齐到底部。任何解决方案都可以使li具有相同的级别？

使用过的代码：（在第二个li中添加了更多内容，请参阅..其他李的位置移至底层，为什么会发生？）

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 2

问题是你的身高不同......但他们正在沿着基线对齐..你只是说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>

ul li列出没有正确对齐

2 个答案: