CSS背景100％，在這個空的空間

Question

我有創建網頁菜單的問題 - 我必須做一些事情，如下圖所示。這黑色部分只是圍繞中間內容的背景。我想讓這個左邊的黑色部分擴展到屏幕的左邊，右邊的黑色部分擴展到屏幕的右邊，但是我不能使用寬度：外部div上的100％，因爲我想在這個區域之間留出一個空的空格每個紅場。

...和更寬的屏幕這一定是這樣的：

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

Answer 2

編輯

我已根據您的評論更新了代碼，發生了輕微的錯誤，並且我已將其刪除。看看這個新的鏈接

http://jsfiddle.net/24eDx/1/

據我理解你的問題，你要創建將被定向的中心菜單欄，它看起來像你http://i.imgur.com/s6keh9f.jpg

我已創建了一個一個JSFiddle你 http://jsfiddle.net/24eDx/

HTML：

<div class="header"> 
    <div class="header-wraper"> 
     <div> 
      <ul class="menu"> 
       <li><div class="menu-li">Menu 1</div> </li> 
       <li><div class="menu-li">Menu 2</div> </li> 
       <li><div class="menu-li">Menu 3</div> </li> 
       <li><div class="menu-li">Menu 4</div> </li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS：

.header{ 
    background : black; 
    height:50px; 
    width:100%; 
} 
.header-wraper 
{ 
    width : 80%; 
    margin:0 auto; 
} 
.header .header-wraper .menu li 
{ 
    list-style: none; 
    background: red; 
    float: left; 
    padding: 16px 14px; 
    border: 2px solid #FFF; 
    border-width: 0 1px; 
} 
.header .header-wraper .menu li:first-child 
{ 
    border-width: 0 1px 0 2px; 
} 
.header .header-wraper .menu li:last-child 
{ 
    border-width: 0 2px 0 1px; 
} 

附：：請下次添加您正在編寫的代碼，這對每個人都有幫助，並且閱讀幫助您瞭解如何提出堆棧溢出問題的文檔。