无100％宽度的显示块

我想使用display属性将span元素设置为出现在另一个元素下面。我尝试应用内联块但没有成功，并且发现如果可以设法避免使元素的宽度为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;
}

如果我正确理解了您的问题，则以下CSS会将您的a浮动到跨度以下，并使其宽度保持100％：

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

使用display: table。

该答案必须至少包含30个字符；我输入了20，所以这里还有一些。

您可以使用：

width: max-content;

注意：支持有限，请在此处查看支持的浏览器的完整分类

我将每一行都保留到自己的div，所以...

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

然后是CSS：

.cell{display:inline-block}

如果不查看原始代码，很难为您提供解决方案。

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

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

试试这个：

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

我遇到了这个问题，我像这样解决了它：

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

.child {
  display: block;
}

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

没有“空白：nowrap”：

与“空白：nowrap”：

编辑：看来，它也可以在没有子块的情况下正常工作，所以这似乎很好用。

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

您可以使用以下内容：

display: inline-block;

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