ang*_*son 13 html css background-color
我有一个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表现得像这样:
这有什么意义吗？
有没有办法做到这一点？
我在这里设置了一个测试页面,如果你在iPhone上查看它,虽然是一个小字体,但显示问题:http://www.vkarlsen.no/test/test.html
我看到以下问题列为SO的潜在重复/建议,这是我在尝试内部信息时注意到的:
试过建议的<meta ... viewport .../>标签,没有什么区别(它现在出现在测试页面中.)
<div>s已经是块元素
尝试将div设置为display: inline-block;但这似乎没有改变任何东西
use*_*719 14
黑魔法:
<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,查看显示中的块级元素:内联块可能会有所帮助.