Question

我看过很多网站都有一个宽度为950px的容器，它们有一个顶部标题，其中包含一些链接，并且它们与容器的边距对齐。标题也有背景颜色，填充容器外的所有区域，这也是我想要做的。可能没有很好地解释，所以让我们举一些例子： StackOverflow有一个“标题”，其中有“问题”，“作业”，“文档”，“标签”，“用户”等链接，它们与容器对齐，但它也有背景颜色填充容器外的区域。我的问题是如何获得相同的标题“布局”，其中文本/链接与容器对齐，背景颜色在div容器上延伸。

HTML CODE

    <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;
}

我想要的是将“.platform-switcher”的div背景颜色从“容器”中拉出并保持对齐，容器，“平台切换器”内容（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

如果我理解，你想要有一个全宽度的元素来包装一个定义你的＆＃34;容器的元素＆＃34;或＆＃34;视口＆＃34;或＆＃34;内容＆＃34;宽度。这是一个例子。

＆＃13;

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

＆＃13;

<header>
  <div class="viewport">
    header
  </div>
</header>

<main class="viewport">
  content
</main>

<footer>
  <p class="viewport">footer</p>
</footer>

＆＃13;

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

2 个答案: