將元素設置爲寬度100％，以允許背景流動，但將960px中的兒童保留在中央？

編輯2：似乎很清楚，似乎沒有人能夠理解我在問什麼，所以我會試圖說明它;將元素設置爲寬度100％，以允許背景流動，但將960px中的兒童保留在中央？

enter image description here

在中心區域，有ID #navigation。這有以下CSS屬性，

width: 960px; 
margin: auto; 
background: #e4bd04;

它具有960像素的寬度究其原因，是因爲我想在我的導航欄中的鏈接仍然是一個寬960px範圍內。我也希望他們居中，所以我申請margin: auto。但是，這意味着我的背景只能流動960像素。我希望背景能夠在整個窗口寬度（頁面的100％）上流動，以便屏幕較大的用戶不會在頂部留下大量空白區域。

爲了防止這種情況，我巢#navigation到另一個的ID，，向其中我申請width: 100%;和background: #e4bd04;，使得背景現在似乎延長窗口的整個寬度。

有沒有辦法做到這一點，而不使用兩個元素，因爲我已經做了？

來源

2012-02-20 Avicinnian

我只是測試你的演講在這裏http://jsfiddle.net/7GTCc /它像一個魅力。你的瀏覽器是什麼？有什麼事嗎？ – Valky 2012-02-20 00:44:09

我忘了澄清，它可以用單個元素而不是嵌套元素（100％寬度，但內容限制爲固定寬度）完成。 – Avicinnian 2012-02-20 00:51:27

檢查我的答案;-) – Valky 2012-02-20 00:54:07

我不舒服，你不想有2個div以固定寬度居中另一個div，不是嗎？

我不認爲你會喜歡它，但是這是一個解決方案：

.nav { 
    width:960px; 
    position:absolute; 
    left:50%; 
    margin-left:-480px; // width/2 
} 

<body> 
<div class="nav">Test content</div> 
</body>

結果爲300像素的div：http://jsfiddle.net/7GTCc/1/

或者其他，真醜（笑）：

.nav {width:960px;} 

<center> 
    <div class="nav">Test content</div> 
</center>

關於你的插畫編輯

「有沒有辦法做到這一點，而不使用兩個元素，因爲我已經做了？」

沒有:-)

但是如果你只希望背景是100％，沒有指定的背景（顏色或URL）到您的#navigation。

最後一次嘗試回答，測試：

#navigation { 
    min-width:960px; 
    text-align:center; 
}

演示在這裏：http://jsfiddle.net/7GTCc/3/

來源

2012-02-20 00:53:43 Valky

「.nav」類的背景仍然限制爲300px。我需要的背景適合頁面的寬度:(。 – Avicinnian 2012-02-20 00:56:46

euh ...，如果你想.nav到100％爲什麼問960像素或放一個最小寬度：960像這一切 – Valky 2012-02-20 01:00:55

但我有一個問題爲什麼你不想使用2個元素？ – Valky 2012-02-20 01:25:58

，你可以使用min-width屬性，不知道你在尋找什麼

<div style="min-width:960px; width:100%"></div?

來源

2012-02-20 00:56:48 Ironsun

我期待有元素的背景有窗口寬度，而它的子內容被限制爲一個固定的寬度和居中。例如，當您將填充應用到對象時，它會保留它的「寬度」屬性，並將其展開。 – Avicinnian 2012-02-20 01:00:18

確定了您，我不認爲只用一個div就可以實現此目的您必須保留一個用於背景，或者您可以將背景分配給主體 – Ironsun 2012-02-20 01:08:42

是的，沒有額外的標記就很容易做到。導航擴展部分使用::before僞元素。

enter image description here

演示：http://jsfiddle.net/ThinkingStiff/eAf7w/

HTML：

<div id="nav">navigation</div>

CSS：

#nav { 
    background: #6D7B8D; 
    height: 40px; 
    margin: 0 auto;  
    width: 400px; 
} 

#nav::before { 
    background-color: lightblue; 
    content: '\00a0'; 
    display: block; 
    height: 40px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
    z-index: -1; 
}

來源

2012-02-20 01:54:51 ThinkingStiff

尼斯，但在IE 8之前沒有兼容性 – Valky 2012-02-20 11:54:26

將元素設置爲寬度100％，以允許背景流動，但將960px中的兒童保留在中央？

回答

相關問題