如何在 div "container" (950px) 上填充 div 的 background-color

Question

我见过很多网站都有一个宽度为 950 像素的容器，它们的顶部 header 包含一些链接，并且它们与容器的边距对齐。 Header 也有一个背景颜色，可以填充容器外的所有区域，这也是我想要做的。可能没有很好地解释，所以让我们举个例子： Whosebug 有一个 "header"，其中有像 "Questions" "Jobs" "Documentation" "Tags" "Users" 这样的链接，它们与容器对齐，但它也背景颜色填充容器外的区域。我的问题是如何获得相同的 header "layout"，其中 text/links 与容器对齐，背景颜色在 div 容器上延伸。

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”从 "container" 中拉伸出来并保持与容器 "platform-switcher" 对齐内容（PC Games/Xbox 等...）。

Answer 1

我不知道我是否理解，但我尝试了:D

试试这个：（将这个添加到你想要的 div）

background-color: red;
width: 100%;
border-bottom: 1px solid grey; */ for the border */
z-index: 999;

Answer 2

据我了解，您想要全角元素来包裹定义 "container" 或 "viewport" 或 "content" 宽度的元素。这是一个例子。

* {
  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>

如何在 div "container" (950px) 上填充 div 的 background-color

How to fill div's background-color over a div "container" (950px)

html

css

background

colors

stretch