CSS 背景 100% 和空白

Question

我在创建网页菜单时遇到问题 - 我必须执行如下图中所示的操作。这个黑色部分只是中间内容周围的背景。我想让这个左边的黑色部分延伸到屏幕的左侧，右边的黑色部分延伸到屏幕的右侧，但是我不能在外部 div 上使用 width:100% 因为我想在两者之间留一个空白每个红色方 block 。

……在更宽的屏幕上，这一定是这样的:

Answer 1

确实如此。

Codepen Demo

HTML

<header>

  <div class="inner"></div>

</header>

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  overflow:hidden; /* prevent scrollbar */
}

header {
  position: relative;
}

.inner {
  height:100px;
  width:980px;
  margin:0 auto;
  border:1px solid black;


}
header:before, header:after {
  content: "";
  position: absolute;
  background-color: lightblue;
  top: 0;
  bottom:0;
  width:50%;
} 

header:before {
  left:0;
  margin-left:-490px; 
}

header:after {
  right:0;
  margin-right:-490px;
}