CSS水平導航，動態寬度按鈕，100％寬度，圖背景

我試圖使與左側未知寬度按鈕x個水平導航欄，一個150像素寬的圖像，以在右側蓋，和按鈕和帽之間的空間流動佔據屏幕寬度的100％。我並不擅長CSS，我一直在使用div，表格，無序列表和三者的組合來玩弄不同的設置，並且無法正常工作。我會嘗試，現在把它畫在ASCII：CSS水平導航，動態寬度按鈕，100％寬度，圖背景

<----Button1----><-Button2-><---------------Spacer-----------><!Cap:150px!>

所以，按鈕，對屏幕的左側，將縮小以適合文本內容，帽將面對的右側的屏幕上，並且間隔件將展開/收縮以使整個組件填滿屏幕的100％。圖像是PNG的一些透明度，所以圖像不能重疊。

感謝您的幫助。

來源

2009-10-01 JoshKraker

最簡單的解決方案：

<div id="nav"> 
    <button type="button">One</button> 
    <button type="button">Two</button> 
    <button type="button">Three</button> 
    <div id="cap">Cap</div> 
</div>

與：

#nav { overflow: hidden; } 
#nav button { float: left; } 
#cap { float: right; width: 150px; }

沒有間隔物是必需的，因爲在div將是100％的寬度無論如何（除非其它CSS改變了）。這是除非你需要特殊的造型，或者有其他的理由。如果這只是一個樣式問題，則將樣式應用於外部導航div，並且內容將顯示在其上方，從而有效地執行相同的操作。

來源

2009-10-01 00:45:11 cletus

感謝您花時間幫助我。所有div都有一個背景：我想重複填充寬度的url（'image.png'）。此外，帽子具有透明度，所以我不能只留下spacer作爲「nav」中的背景， – JoshKraker 2009-10-01 00:55:52

CSS水平導航，動態寬度按鈕，100％寬度，圖背景

回答

相關問題