Question

目前我有这个（标准）代码，它给了我一个全宽背景但是将标题限制在居中的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>

这可能是不可能的，但我想在解雇之前我会问！

Answer 1

如果是整个页面，您可以在<body>上设置背景，否则我认为您需要使用<div>。

Answer 2

您可以放弃div包装器，转而使用:before和:after。这是一篇关于它的文章：http://css-tricks.com/9443-full-browser-width-bars/

文章末尾有一个链接，指向哪些浏览器支持:before和:after的信息。对于那些没有的人，你可以使用javascript polyfill。

Answer 3

这样的事情能做到这一点吗？

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/

Answer 4

我认为这是你正在使用的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有点像你想做的那样！

Answer 5

实际上只使用一个元素就可以了。由于填充百分比是指parent's width。在fiddle中，我使用了div，但它也适用于header。

CSS将960px限制在div内？

5 个答案: