gpt4 book ai didi

html - Word break 将下一个 li 向下推

转载 作者:行者123 更新时间:2023-11-28 00:02:28 24 4
gpt4 key购买 nike

我正在使用 display: inline-block 来显示我的帖子,每当有一个很长的名字,需要换到第二行时,它会推送下一个 li 下来。我不确定为什么要这样做?

When a word/line breaks it pushes li up

代码:

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

最佳答案

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

发生这种情况是因为行内 block 元素是内联的。它以内联方式运行(除了还具有像“box-model”这样的 block 属性),所以像 line-heightvertical-aligntext- align等对其有影响。

关于html - Word break 将下一个 li 向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20615668/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com