Display block without 100% width

我想使用 display 属性将 span 元素设置为出现在另一个元素的下面。我尝试应用 inline-block，但是没有成功，我想如果我能设法避免给元素100% 的宽度(我不希望元素“伸展”) ，我可以使用 block。这能做到吗? 如果不能，解决这类问题的好方法是什么？

例如: 一个新闻列表，我想设置一个“阅读更多”链接在每篇文章的结尾(注意: <a>而不是 <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a>
</li>


Update: Solved. In CSS, apply

li {
clear: both;
}
li a {
display: block;
float: left;
clear: both;
}
101113 次浏览
小开

我会保持每一行都有自己的 div 所以..。

<div class="row">
<div class="cell">Content</div>
</div>
<div class="row">
<div class="cell">Content</div>
</div>

然后是 CSS:

.cell{display:inline-block}

在没有看到原始代码的情况下，很难给出解决方案。

小开
最佳答案

如果我正确理解了你的问题，下面的 CSS 会将你的 a 浮动到跨度的下方，并且不让它有100% 的宽度:

a {
display: block;
float: left;
clear: left;
}
小开

再说一遍: 这个答案可能有点太晚了(但是对于那些找到这个页面的答案的人来说)。

而不是 使用 display:inline-block;

小开

试试这个:

li a {
width: 0px;
white-space:nowrap;
}
小开

使用

display: table

在您的 CSS 代码中。

小开

you can use:

width: max-content;

注意: 支持是有限的，check here对于支持浏览器进行了全面的分解

小开

我有个问题, I solved it like so:

.parent {
white-space: nowrap;
display: table;
}


.child {
display: block;
}

“ white-space: nowrap”确保子元素(如果有的话)的子元素不会在空间不够的情况下换行到新行。

没有“ white-space: nowrap”:

enter image description here

用“ white-space: nowrap”:

enter image description here

编辑: 对我来说，它似乎也只是在没有子块部分的情况下工作, 所以这个看起来不错。

.parent {
white-space: nowrap;
display: table;
}
小开

你可使用以下连结:

display: inline-block;

可以很好地处理链接和其他元素。

小开

我用这个:

顶部;//完成这个技巧

a {
display: inline-block;
vertical-align: top;
padding: 10px 30px;
border-radius: 5px;
background-color: #372a20;
border: 1px solid var(--blanco);
color: var(--blanco);
margin: 0 auto -25px;
text-decoration: none;

}


提交答案