没有 100% 宽度的显示块答案

【问题标题】：Display block without 100% width没有 100% 宽度的显示块
【发布时间】：2012-09-24 08:59:11
【问题描述】：

我想使用 display 属性设置一个 span 元素出现在另一个元素的下方。我尝试应用 inline-block 但没有成功，并且认为如果我设法避免给元素提供 100% 的宽度（我不希望元素“伸展”），我可以使用 block。可以这样做吗？如果不能，解决这类问题有什么好的做法？

示例：我想在每个帖子末尾设置“阅读更多”链接的新闻列表（注意：<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;
}

【问题讨论】：

【解决方案1】：

使用display: table。

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

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，以下 CSS 会将您的 a 浮动到跨度下方并防止其具有 100% 的宽度：

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

【讨论】：

【解决方案3】：

你可以使用：

width: max-content;

注意：支持是有限的，check here 支持浏览器的完整分类

【讨论】：

我从没听说过这个！很有趣。
自 Chrome 46 和 FF 66 以来很好。应该接受答案。 inline-block 等人打破了我的布局。
@i336_ 截至今天，Edge 浏览器仍然不支持它。
Edge 还是 Chromium Edge？（要清楚；前者将要过渡一段时间......）
根据 caniuse.com，截至 2020 年 1 月 14 日发布的 Edge 79，Edge 支持它。总共有 92% 的支持率。 caniuse.com/?search=max-content 这是对我的热烈欢迎。大约 2 年前，当我第一次听说它时，它没有足够广泛的支持让我在生产中使用，但现在可以了。

【解决方案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}

没有看到你的原始代码，很难给你一个解决方案。

【讨论】：

【解决方案5】：

再说一遍：答案可能有点太晚了（但对于那些无论如何都能找到此页面的人来说）。

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

【讨论】：

【解决方案6】：

试试这个：

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

【讨论】：

【解决方案7】：

我有这个问题，我是这样解决的：

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

.child {
  display: block;
}

“white-space: nowrap”确保孩子的孩子（如果有的话）在空间不足时不会换行。

没有“空白：nowrap”：

带有“空白：nowrap”：

编辑：它似乎也可以在没有子块部分的情况下为我工作，所以这似乎工作正常。

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

【讨论】：

【解决方案8】：

您可以使用以下内容：

display: inline-block;

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

【讨论】：