我见过很多网站都有一个宽度为 950 像素的容器，它们有一个包含一些链接的顶部标题，并且它们与容器的边距对齐。 header 也有一个背景颜色，可以填充容器外的所有区域，这也是我想要做的。可能没有很好地解释，所以让我们举个例子: StackOverflow 有一个“标题”，其中有“问题”、“工作”、“文档”、“标签”、“用户”等链接，它们与容器对齐，但它也有背景颜色填充容器外的区域。我的问题是如何获得相同的标题“布局”，其中文本/链接与容器对齐，背景颜色在 div 容器上拉伸(stretch)。
HTML代码
<body><div class="container">
<div class="switcher">
<div class="platform-switcher">
<div id="pc-switcher"><img src="pc-logo.png"> PC Games</div>
<div id="xbox-switcher"><img src="xbox-logo.png"> Xbox</div>
<div id="ps4-switcher"><img src="ps4-logo.png"> PS4</div>
</div>
<div class="flags">
<div class="language"></div>
<div class="currency"></div>
</div>
</div>
<div id="search">
<form id="search-form">
<input type="text" id="searchbar">
</form>
</div>
</body>
CSS 代码
.container {
width: 950px;
margin: 0 auto;
}
.platform-switcher {
background-color: black;
height: 40px;
display: inline-block;
}
#search-form {
float: right;
}
.platform-switcher div {
}
#pc-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
#xbox-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
#ps4-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
我想要的是将 div 的背景颜色“.platform-switcher”从“容器”中拉伸(stretch)出来，并与容器、“平台切换器”内容(PC 游戏/Xbox 等...)保持对齐。
最佳答案
如果我理解，您希望拥有全 Angular 元素来包裹定义“容器”或“视口(viewport)”或“内容”宽度的元素。这是一个例子。
* {
margin:0;padding:0;
box-sizing:border-box;
}
header,footer {
background: black;
color: white;
}
.viewport {
width: 90%;
margin:auto;
max-width: 960px;
padding:2em 0;
}<header>
<div class="viewport">
header
</div>
</header>
<main class="viewport">
content
</main>
<footer>
<p class="viewport">footer</p>
</footer>关于html - 如何在 div "container"(950px) 上填充 div 的背景色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44053016/