如何在不使用浮点数或 pos:abs 的情况下获得最小宽度行为（例如浮动或 pos:abs 时）答案

【问题标题】：How to get minimal width behavior (such as when floating or pos: abs) without using a float or pos: abs如何在不使用浮点数或 pos:abs 的情况下获得最小宽度行为（例如浮动或 pos:abs 时）
【发布时间】：2013-08-21 00:44:20
【问题描述】：

假设我有一个块元素，例如 h2：

<h2>Title</h2>

我给它一个背景色。背景将跨越包装器的整个宽度（应该如此）。

如果我浮动它，或者position: absolute，它会“收缩包装”这些文字。但是，这两种方法都会将元素从“流”中取出，并防止其将其余内容向下推到页面下方。

我想避免每次都在标题下方添加一个明确的字眼。有更好的解决方案吗？我认为overflow 属性可以做到这一点，但我没有弄清楚。

小提琴：

http://jsfiddle.net/QxRRh/

【问题讨论】：

你能澄清你想要达到的目标吗？我不明白您所说的“最小宽度行为”是什么意思。
@Pekka 웃：使 h2 按宽度缩小以适应其内容，而不会产生与浮动或弃置相关的任何副作用。
Is it possible to center a form while maintaining separation of content and presentation?的可能重复

标签： css css-float width

【解决方案1】：

这是一种（非常简单的）方法...

h2 {
    display: table;
}

Fiddle

【讨论】：

为什么使用这个（例如在旧版 IE 中不起作用）而不是 display: inline？
因为使用inline 或inline-block 会使元素inline 或inline-block （显然）。不是 OP 想要的
哇！显示：内联或内联块。为什么不添加答案 - 这是一个问答网站，而不是问答网站：O
好吧 - 只要 NEXT 元素是块，内联就可以工作
@Mike Lewis：display: table 适用于 IE8+ 和其他一切，这实际上并不比 display: inline-block 好或差。当您谈论 CSS 时，语义并不重要，除非您是那些 OOCSS 潮人之一。

【解决方案2】：

将标题文本包装在 <span> 中并将背景颜色应用于该范围。

HTML：

<h2><span class="blue">Title</span></h2>

CSS：

.blue{ background-color:blue; }

【讨论】：

我改变了措辞，实现这一目标的方法不止一种。
这类似于在下面添加一个透明 - 我试图避免额外的标记
这种方式不会改变标题的显示方式并给出你想要的结果。