Html 如何设置 div 的样式以使其具有整个内容宽度的背景颜色，而不仅仅是显示的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8704817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
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?
提问by Lasse V. Karlsen
I have an HTML page that for the sake of this question looks like this:
我有一个 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>
Note the "very long line", and the background color of that div.
注意“很长的一行”，以及那个 div 的背景颜色。
My problem (and I bet it is a basic one) is that the background-color stops at the edge of the screen. When I scroll out to the right to see the rest of the text, the rest of the text background is white.
我的问题（我敢打赌这是一个基本问题）是背景颜色停在屏幕边缘。当我向右滚动以查看其余文本时，文本背景的其余部分是白色的。
Basically I want my div to behave like this:
基本上我希望我的 div 表现得像这样：
- To have the specified background color
- To minimum have the same width as the screen, even if the text within is just a few words
- To follow the width of the text, if it is more than the width of the screen
- Optionally (and I know this is really a different, follow-up, question), if I have more than one such div, following the first, is there a way to have the two follow the width of the widest div automatically?
- 具有指定的背景颜色
- 最小和屏幕一样宽，即使里面的文字只有几个字
- 跟随文字的宽度，如果大于屏幕的宽度
- 可选（我知道这确实是一个不同的后续问题），如果我有多个这样的 div，在第一个之后，有没有办法让两个 div 自动跟随最宽 div 的宽度？
Did that make any sense?
这有什么意义吗？
Is there any way to do this?
有没有办法做到这一点？
I have set up a test page here, which, if you view this on iPhone, although a small font, shows the problem: http://www.vkarlsen.no/test/test.html
我在这里设置了一个测试页面，如果你在 iPhone 上查看这个页面，虽然字体很小，但会显示问题：http: //www.vkarlsen.no/test/test.html
I saw the following questions listed as potential duplicates/suggestions by SO, here's what I noticed when I tried the information within:
我看到以下问题被列为潜在的重复/建议，这是我在尝试其中的信息时注意到的：
iPad background for div blocks not spanning entire width of screen
Tried the suggested
<meta ... viewport .../>tag, did not make a difference (it is present in the test page right now.)Background color stretches accross entire width of ul
<div>s are already block elementsWebKit doesn't paint background-color for entire width of final inline list item
Tried setting the div to
display: inline-block;but this did not appear to change anything
尝试了建议的
<meta ... viewport .../>标签，没有任何区别（它现在出现在测试页面中。）<div>s 已经是块元素尝试将 div 设置为，
display: inline-block;但这似乎没有改变任何东西
回答by user372719
black magic:
黑魔法：
<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>
If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.
如果有人清楚地解释了为什么会这样，请发表评论。我认为这与浮动的副作用有关，它消除了主体必须适合页面宽度的约束。
回答by Jan P?schko
The problem seems to be that blockelements only scale up to 100% of their containing element, no matter how big their content is—it just overflows. However, making them inline-blockelements apparently resizes their width to their actual content.
问题似乎是block元素只能扩展到其包含元素的 100%，无论它们的内容有多大——它只是溢出。但是，使它们成为inline-block元素显然会将其宽度调整为实际内容。
HTML:
HTML：
<div id="container">
<div class="wide">
foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="wide">
bar
</div>
</div>
CSS:
CSS：
.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }
(The containerelement addresses your follow-up question to make the second divas big as the previous one, and not just the screen width.)
（该container元素解决了您的后续问题，使第二个div与前一个一样大，而不仅仅是屏幕宽度。）
I also set up a JS fiddle showing my demo code.
我还设置了一个JS 小提琴来显示我的演示代码。
If you run into any troubles (esp. cross-browser issues) with inline-block, looking at Block-level elements within display: inline-blockmight help.
如果您遇到任何问题（尤其是跨浏览器问题）inline-block，查看display: inline-block 中的块级元素可能会有所帮助。
回答by Joop Eggen
.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }
You can try scrollor auto.
你可以试试scroll或auto。
回答by Jonah Bishop
The inline-blockdisplay style seems to do what you want. Note that the <nobr>tag is deprecated, and should not be used. Non-breaking white space is doable in CSS. Here's how I would alter your example style rules:
该inline-block显示器的风格似乎做你想要什么。请注意，该<nobr>标签已被弃用，不应使用。不间断的空白在 CSS 中是可行的。以下是我将如何更改您的示例样式规则：
div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }
Alter your stylesheet, remove the <nobr>tags from your source, and give it a try. Note that display: inline-blockdoes not work in every browser, though it tends to only be problematic in older browsers (newer versions should support it to some degree). My personal opinion is to ignore coding for broken browsers. If your code is standards compliant, it should work in all of the major, modern browsers. Anyone still using IE6 (or earlier) deserves the pain. :-)
改变你的样式表，<nobr>从你的源代码中删除标签，然后试一试。请注意，display: inline-block这并不适用于所有浏览器，尽管它往往只在旧浏览器中出现问题（新版本应该在某种程度上支持它）。我个人的观点是忽略对损坏浏览器的编码。如果您的代码符合标准，它应该适用于所有主要的现代浏览器。任何仍在使用 IE6（或更早版本）的人都应该受苦。:-)
回答by Sufiyan Ghori
or try this,
或者试试这个
.success { background-color: #ccffcc; overflow:auto;}
回答by designersvsoft
Try this,
尝试这个，
.success { background-color: #ccffcc; float:left;}
回答by Tomas
It is because you set the width:100%which by definition only spans the width of the screen. You want to set the min-width:100%which sets it to the width of the screen... with the ability to grow beyond that.
这是因为您设置了width:100%which 根据定义只跨越屏幕的宽度。您想设置将min-width:100%其设置为屏幕宽度的 ...... 具有超出该宽度的能力。
Also make sure you set min-width:100%for bodyand html.
还要确保您设置min-width:100%了body和html。
回答by Rob
The width is being restricted by the size of the body. If you make the width of the body larger you will see it stays on one line with the background color.
宽度受到身体大小的限制。如果您使主体的宽度变大，您将看到它与背景颜色保持在一条线上。
To maintain the minimum width: min-width:100%
保持最小宽度：min-width:100%
