CSS背景圖像的動態寬度

我在我的頁面上使用列表和CSS來設置菜單欄來顯示菜單元素。在菜單按鈕的右側，在這裏是「Home」，我有一個空的欄元素，我想擴展到頁面的寬度，然後關閉菜單欄寬度的結束元素。我試圖將寬度設置爲100％，這會導致它打破下一行並填充頁面的整個寬度，如下所示。任何想法，我如何保持在同一行上的所有東西，並有空元素寬度動態？CSS背景圖像的動態寬度

的HTML：

<div> 
    <li class="menu-home"> 
     <a href="#">&nbsp;</a> 
    </li> 
    <li class="menu-bar"> </li> 
    <li class="menu-bar-right"> </li> 
</div>

的CSS：

li.menu-bar { 
    position: static; 
    float: left; 
    list-style-type: none; 
    background-image: url('top.png'); 
    border-style: none; 
    border-width: 0px; 
    padding: 0px; 
    height: 34px; 
    width: 100%; 
}

問題：

enter image description here

來源

2012-07-28 Peter Larsen

可以float的'home' and 'right' LIS到left and right，分別。出現在標記中的home and rightLIs下方的任何LIs都會溢出到中心區域。

http://jsfiddle.net/gwmFk/1/

來源

2012-07-28 17:56:49

非常感謝您的建議。我已經實現了你的設計，現在所有東西都顯示在一行上，但是我的中心元素在左右元素的後面，所以圓角正在消失。任何方式來讓中心元素填充頁面之間的空間而不是整個頁面的寬度？ – 2012-07-29 19:48:59

我沒有實現「overflow：hidden;」正確。一旦我將此添加到解決方案的中心元素 - 謝謝 – 2012-07-30 16:50:36

如果你知道你的home鍵的寬度，你可以在酒吧的休息使用display: inline-block;並給它一個合適的利潤等於寬度（以及任何填充或空間等）

你知道按鈕的寬度嗎？

來源

2012-07-28 19:22:06

謝謝您的建議。我有這個按鈕的寬度，但是在某些情況下會增加更多的按鈕。如果我顯示的圖像超過50張，圖像被分割爲多個頁面，並添加了下一個和後退按鈕，所以我真的希望寬度是動態的，所以它只會填充空間 – 2012-07-29 19:07:47

如果是這樣的話，我建議你看看Twitter Bootstrap（http://twitter.github.com/bootstrap/scaffolding.html）。這正是你要找的。查看腳手架頁面並關注流體佈局。你還應該看看其他特性，看看它們中的任何一個是你將要實現的東西--Bootstrap有一套很棒的jQuery插件，你可以添加它們。 – 2012-07-30 11:01:11

CSS背景圖像的動態寬度

回答

相關問題