目前我有这个(标准)代码,它给了我一个全宽背景但是将标题限制在居中的960px:
<div style="background-color: #222">
<header style="width: 960px; margin: 0 auto;">
<h1>Site Title</h1>
</header>
</div>
有没有办法可以将它们应用到CSS中的单个元素,并完全避免使用div
?我考虑this jQuery hack计算并在header
上设置左右填充,但纯CSS解决方案会更好。
所需的HTML:
<header>
<h1>Site Title</h1>
</header>
这可能是不可能的,但我想在解雇之前我会问!
答案 0 :(得分:0)
如果是整个页面,您可以在<body>
上设置背景,否则我认为您需要使用<div>
。
答案 1 :(得分:0)
您可以放弃div包装器,转而使用:before
和:after
。这是一篇关于它的文章:http://css-tricks.com/9443-full-browser-width-bars/
文章末尾有一个链接,指向哪些浏览器支持:before
和:after
的信息。对于那些没有的人,你可以使用javascript polyfill。
答案 2 :(得分:0)
这样的事情能做到这一点吗?
header {
background-color: #222;
display: block;
width: 100%;
}
header h1 {
background: #fcc;
color: #000;
margin: 0 auto;
width: 960px;
}
编辑此jsFiddle:http://jsfiddle.net/t6wBv/2/
答案 3 :(得分:0)
我认为这是你正在使用的HTML5吗?没有必要在标题周围包装div。这是关于HTML5的美妙事物之一!
我要做的是给这个特定的标题一个ID,并从那里进行样式化。例如:
您的CSS文件(或包含的CSS):
#title {
background-color: #222;
margin: 0 auto;
width: 960px;
}
您的HTML:
<header id=#title>
<h1>Site Title</h1>
</header>
This link有点像你想做的那样!
答案 4 :(得分:0)
实际上只使用一个元素就可以了。由于填充百分比是指parent's width。
在fiddle中,我使用了div
,但它也适用于header
。