当前面的 div 中的文本溢出时,如何防止后面的内联 div 换行显示。
如您所见,对于第一个帖子,主要内容换行到第二行,因此它后面的链接显示在新行上(这是不正确的)。
但是对于第 3 篇文章,主标题足够短,只能在一行上,并且链接正确显示在标题后面。
如何防止链接显示在新行的第一种情况?
最佳答案
对这两个元素使用 display: inline;
,而不是 display: inline-block;
(你可能需要一个包装器 div
然后).如果内联 block 的内容至少有一行长,则内联 block 将具有容器的整个宽度。
.wrap {
border: 1px solid #aaa;
padding: 20px;
}
.first {
display: inline-block;
}
.second {
display: inline;
}
<div class="wrap">
<div class="first"><strong>inline-block</strong> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula eget dolor. </div>
<div class="first" style="color : green;">Here another element.</div>
</div>
<div class="wrap">
<div class="second"><strong>inline</strong> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula eget dolor. </div>
<div class="second" style="color : green;">Here another element.</div>
</div>
关于html - 当前一个 div 文本溢出时,内联 div 行的第二个 div 从下一行开始而不是在前一个 div 之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52803275/