html - CSS 将 960px 限制在一个 div 中？

Question

目前我有这个(标准)代码，它给我一个全 Angular 背景，但将标题限制为居中 960 像素:

<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

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

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