显示块没有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;

注意：对于支持浏览器的完整细分，支持有限，check here

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;

Answer 6

试试这个：

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

Answer 7

我遇到了这个问题， 我是这样解决的：

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

.child {
  display: block;
}

“空白：nowrap”可确保在没有足够空间的情况下，子级的子级（如果有）不会换行。

没有“空白：nowrap”：

带有“空白：nowrap”：

---

edit：对我来说，它似乎也可以在没有子块的情况下工作， 所以这似乎很好用。

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

Answer 8

您可以使用以下内容：

display: inline-block;

在链接和其他元素上效果很好。

Answer 9

您是否只能将范围设置为display: block并在包含width元素上设置li？