没有 100% 宽度的显示块

Posted 2023-02-18

【中文标题】没有 100% 宽度的显示块

【英文标题】：Display block without 100% width

【发布时间】：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;

【问题讨论】：

您有任何标记（html 或 CSS）要展示给我们吗？如果没有任何实际工作，很难解决这个问题。在jsfiddle 上的演示也很好。

我认为我不需要任何示例代码，因为它只是定位一个 span 元素。查看更新后的帖子。

你可以通过只使用我下面提到的一行代码来减少所有标记。

【参考方案1】：

使用display: table。

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

【讨论】：

天才解决方案。 margin: 0 auto; 如果你需要它居中。

display: table; 有效，但不接受任何填充。

@ha404 你是对的，填充有效！ jsfiddle.net/wgj7xvLe/4 至少在我的浏览器（Chromium）中。

@donquixote 只要您使用border-collapse:separate，它就应该接受填充。刚遇到这个问题。

【参考方案2】：

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

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

【讨论】：

我尝试应用它，但由于跨度元素（示例中的标题和日期）没有浮动，因此链接定位在最后一个跨度之前。猜测一种解决方案是让 li 中的所有子元素浮动。

如果我为 li 父级应用 clearfix，这将有效。将采用此解决方案，谢谢 PJ。

【参考方案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：

.celldisplay:inline-block

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

【讨论】：

谢谢，但我不想混入任何 div 元素。

【参考方案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;

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