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

原文由 Staffan Estberg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我正确理解你的问题，以下 CSS 将使你的 a 浮动在跨度下方并防止它具有 100% 的宽度：

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

原文由 PJ McCormick 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

采用

display: table

在你的 CSS 代码中。

原文由 ha404 发布，翻译遵循 CC BY-SA 4.0 许可协议