断言推下李

Question

我正在使用display: inline-block来显示我的帖子，只要有一个很长的名字，需要打破第二行，它会推动下一个li。我不确定为什么这样做？

代码：

<li>
    <div class="thumbnail"></div>
    <div class="title"></div>
</li>

---

.li {
    display: inline-block;
    margin: 7px;
    padding-bottom: 40px;
}

.thumbnail {
    width: 240px;
    height: 240px;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
}

.title {
    padding-top: 10px;
    max-width: 240px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'MavenProMedium';
    font-size: 18px;
}

Answer 1

只需将vertical-align: top放在li上。

这是因为内联块元素是内联的。它以内联方式运行（除了还具有“box-model”之类的块属性），因此line-height，vertical-align，text-align等内容会对其产生影响。< / p>

Answer 2

我发现有用的另一个解决方案是切换inline-block＆＃39;到＆＃39; inline-flex＆＃39;在li元素上。 我承认我并不真正了解其中的差异，只是在萤火虫中玩弄不同的价值观。 可能无法在旧浏览器上运行，不确定。