如何设置 div 的样式，使其具有整个内容宽度的背景色，而不仅仅是显示的宽度？答案

【问题标题】：How to style a div to have a background color for the entire width of the content, and not just for the width of the display?如何设置 div 的样式，使其具有整个内容宽度的背景色，而不仅仅是显示的宽度？
【发布时间】：2012-02-01 01:16:15
【问题描述】：

为了这个问题，我有一个 HTML 页面，看起来像这样：

<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>

注意“很长的线”，以及那个 div 的背景颜色。

我的问题（我敢打赌这是一个基本问题）是背景颜色停在屏幕边缘。当我向右滚动以查看其余文本时，其余文本背景为白色。

基本上我希望我的 div 表现得像这样：

具有指定的背景颜色
至少与屏幕宽度相同，即使里面的文字只有几个字
跟随文本的宽度，如果它大于屏幕的宽度
可选（我知道这确实是一个不同的后续问题），如果我有多个这样的 div，在第一个之后，有没有办法让两个自动跟随最宽 div 的宽度?

这有意义吗？

有什么办法吗？

我这里设置了一个测试页面，如果你在iPhone上查看这个，虽然字体很小，但显示问题：http://www.vkarlsen.no/test/test.html

我看到以下问题被 SO 列为潜在重复/建议，这是我在尝试其中的信息时注意到的：

iPad background for div blocks not spanning entire width of screen

尝试了建议的<meta ... viewport .../> 标签，没有任何作用（它现在出现在测试页面中。）
Background color stretches accross entire width of ul

<div>s 已经是块元素了
WebKit doesn't paint background-color for entire width of final inline list item

尝试将 div 设置为 display: inline-block; 但这似乎没有改变任何东西

【问题讨论】：

我尝试（刚刚，在看到您的评论后）将“width: 100%”替换为“min-width: 100%”，对吗？它似乎没有改变任何东西。
这里的问题不在于元素本身的宽度，而是正确呈现的。它使用white-space: nowrap; 属性，默认为nobr 标记。如果您将相同的属性应用于不同的标签，则会发生相同的行为。我不知道为什么会这样，但这是一个开始。
这应该回答你的后续问题：jsfiddle.net/FmCbg/4
实际上，这解决了我的所有问题。我将整个页面包装在一个 div 中，并将我的 div 更改为 span，并进行了您所做的 css 更改，现在看起来就像我想要的那样。愿意发布您的建议作为答案吗？如果是这样，请将小提琴的内容复制到您的答案中。

标签： css html background-color

【解决方案1】：

黑魔法：

<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>

如果有人清楚解释为什么会这样，请发表评论。我认为这与浮动的副作用有关，它消除了正文必须适合页面宽度的约束。

【讨论】：

相当惊人，至少可以这么说。不知道为什么，但浮动body 可以让它适应div 的宽度。默认情况下，我认为body 的宽度会重置为浏览器视点宽度，但浮动它会使其表现得像width: auto；在FF和Webkit工作，没有机会测试IE或Opera。
太棒了！我试图在 android 中的透明主体 bg 上制作 div bg，它起作用了！

【解决方案2】：

问题似乎在于block 元素只能扩展到其包含元素的 100%，无论其内容有多大——它只会溢出。但是，使它们成为 inline-block 元素显然会根据实际内容调整其宽度。

HTML：

<div id="container">
    <div class="wide">
        foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
    </div>
    <div class="wide">
        bar
    </div>
</div>

CSS：

.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }

（container元素解决了您的后续问题，使第二个div与前一个一样大，而不仅仅是屏幕宽度。）

我还设置了JS fiddle showing my demo code。

如果您在使用 inline-block 时遇到任何问题（尤其是跨浏览器问题），查看 Block-level elements within display: inline-block 可能会有所帮助。

【讨论】：

我后来看到@anstosa 的评论中提到的 JS fiddle ——它实际上是使用table 和table-row 作为display 风格的类似解决方案。不过，inline-block 的兼容性应该会好一些； IEtable 根据MSDN.

【解决方案3】：

.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }

你可以试试scroll或auto。

【讨论】：

向 div 添加溢出/滚动使它们“一直”包含背景颜色，但每个 div 现在独立滚动。我没想过要提到我希望整个页面表现得像一个页面。
然后制作一个外部 div class=success 其他内部。

【解决方案4】：

inline-block 显示样式似乎可以满足您的需求。请注意，<nobr> 标记已弃用，不应使用。不间断的空白在 CSS 中是可行的。以下是我将如何更改您的示例样式规则：

div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }

更改您的样式表，从您的源代码中删除<nobr> 标签，然后试一试。请注意display: inline-block 并不适用于所有浏览器，尽管它往往只在旧浏览器中存在问题（新版本应该在某种程度上支持它）。我个人的意见是忽略损坏浏览器的编码。如果您的代码符合标准，它应该可以在所有主要的现代浏览器中运行。任何仍在使用 IE6（或更早版本）的人都应受此痛苦。 :-)

【讨论】：

【解决方案5】：

这是因为您设置了width:100%，根据定义它只跨越了屏幕的宽度。您想设置 min-width:100% 将其设置为屏幕的宽度...具有超出此范围的增长能力。

还要确保将min-width:100% 设置为body 和html。

【讨论】：

在 div、body 和 html 上设置 min-width: 100%; 样式不会改变结果，虽然 div 的颜色宽度变宽了几个像素，但它仍然停在屏幕。

【解决方案6】：

宽度受到主体尺寸的限制。如果将主体的宽度放大，您会看到它与背景颜色保持在一条线上。

保持最小宽度：min-width:100%

【讨论】：

【解决方案7】：

试试这个，

.success { background-color: #ccffcc; float:left;}

【讨论】：

【解决方案8】：

或者试试这个，

.success { background-color: #ccffcc; overflow:auto;}

【讨论】：