如何在div“容器”上填充div的背景色（950像素）

Question

我已经看到许多网站的容器宽度为950像素，并且它们的顶部标头包含一些链接，并且它们与容器的边距对齐。 标头还具有背景颜色，该颜色填充了容器的所有区域，这也是我想要做的。 可能没有很好地解释，所以让我们举个例子：StackOverflow有一个“标头”，其中包含诸如“问题”，“工作”，“文档”，“标签”，“用户”之类的链接，并且它们与容器对齐，但是也有用背景颜色填充容器之外的区域。 我的问题是如何获取具有与容器对齐的文本/链接和在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”，并将“ platform-switcher”内容（PC游戏/ Xbox等）与容器保持对齐。

Answer 1

我不知道我是否明白，但我尝试：D

试试这个：（将此添加到您想要的div中）

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

Answer 2

据我了解，您希望具有全角元素，这些元素包装了定义“容器”或“视口”或“内容”宽度的元素。 这是一个例子。

 * { 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“容器”上填充div的背景色（950像素）

问题描述

2 个解决方案

解决方案1
0 2017-05-18 16:28:50

解决方案2
0 已采纳 2017-05-18 16:43:35

如何在div“容器”上填充div的背景色（950像素）

问题描述

2 个解决方案

解决方案1 0 2017-05-18 16:28:50

解决方案2 0 已采纳 2017-05-18 16:43:35

解决方案1
0 2017-05-18 16:28:50

解决方案2
0 已采纳 2017-05-18 16:43:35