为了这个问题，我有一个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列为潜在的重复/建议，这是我在尝试其中的信息时注意到的：
不跨越整个屏幕宽度的div 块的 iPad 背景
尝试了建议的
<meta ... viewport .../>标签，没有区别(它现在存在于测试页面中。背景颜色延伸到整个 ul 宽度
<div>已经是块元素WebKit 不会为最终内联列表项的整个宽度绘制背景色
尝试将div 设置为
display: inline-block;但这似乎没有改变任何内容
黑魔法：
<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>
如果有人清楚地解释为什么这样做，请发表评论。 我认为这与浮点数的副作用有关，该浮点消除了正文必须适合页面宽度的约束。
问题似乎是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小提琴，显示我的演示代码。
如果您在使用 inline-block 时遇到任何问题(尤其是跨浏览器问题(，请查看 display：inline-block 中的块级元素可能会有所帮助。
.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }
您可以尝试scroll或auto。
inline-block显示样式似乎可以满足您的需求。请注意，<nobr> 标记已弃用，不应使用。不间断的空格在 CSS 中是可行的。以下是我将如何更改您的示例样式规则：
div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }
更改样式表，从源中删除<nobr>标签，然后尝试一下。请注意，display: inline-block并非在每个浏览器中都有效，尽管它往往仅在旧浏览器中有问题(较新的版本应该在某种程度上支持它(。我个人的观点是忽略损坏的浏览器的编码。如果您的代码符合标准，它应该适用于所有主要的现代浏览器。任何仍在使用IE6(或更早版本(的人都应该受到痛苦。:-)
这是因为您设置了根据定义仅跨越屏幕宽度的width:100%。您要设置将其设置为屏幕宽度的min-width:100%...具有超越这一点的能力。
还要确保为 body 和 html 设置min-width:100%。
宽度受到主体大小的限制。如果使主体的宽度变大，您将看到它与背景颜色保持在一条线上。
保持最小宽度：最小宽度：100%
试试这个，
.success { background-color: #ccffcc; float:left;}
或者试试这个，
.success { background-color: #ccffcc; overflow:auto;}