显示块没有100％的宽度

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

如果我正确地理解你的问题，下面的CSS会将你的a浮动到跨度的下面，并保持100％的宽度：

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

Answer 2

使用display: table 。

这个答案必须至less30个字符; 我进入了20，所以这里还有一些。

Answer 3

我会保持每一行到自己的div，所以…

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

然后为CSS：

 .cell{display:inline-block} 

没有看到您的原始代码很难给你一个解决scheme。

Answer 4

再一次：可能有点太迟的答案（但对于那些find答案的人）。

而不是display:block; 使用display:inline-block;

Answer 5

尝试这个：

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

Answer 6

你不能只是将span设置为display: block并在包含li元素上设置width ？

Answer 7

您可以使用：

width: max-content;

注意：支持是有限的， 请点击这里查看支持浏览器的完整分类