显示块没有100%宽度

Question

我想使用display属性将span元素设置为显示在另一个元素下面.我尝试应用inline-block但没有成功,并认为我可以使用块,如果我以某种方式设法避免给元素宽度为100%(我不希望元素"伸展").这可以做到,或者如果没有,那么解决这类问题有什么好的实践？

示例:我想在每个帖子的末尾设置"阅读更多"链接的新闻列表(注意:<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>

更新:解决了.在CSS中,申请

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

Answer 1

使用display: table.

这个答案必须至少30个字符; 我进入了20,所以这里还有几个.

Answer 2

如果我正确地理解你的问题,下面的CSS将浮动你的跨度并保持100%的宽度:

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

Answer 3

您可以使用:

width: max-content;

注意:支持有限,请在此处查看支持浏览器的完整细分

Answer 4

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

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

然后为CSS:

.cell{display:inline-block}

在没有看到原始代码的情况下很难为您提供解决方案.

Answer 5

再说一遍：答案可能为时已晚（但对于那些仍在此页面找到答案的人而言）。

代替 display:block;使用display:inline-block;