如何使浮動div填充空間

我試圖在網頁上創建一個「工作流」欄。如何使浮動div填充空間

工作流中的項目可能長度不同。

可能有足夠的項目填滿屏幕的寬度，因此流程需要換行到下一行。

我正在使用左浮動div來執行此操作。

但是，我想divs採取適當數量的屏幕寬度。

如果只有三個項目可以放在一行，然後我想這些項目，以適應均勻就行了，考慮到每個單個項目的寬度。

我只能在此刻得到的是某一行的最後div來填補剩餘的空間，這往往意味着我的項目都是靠左對齊，如我能得到一個佈局是這樣的：

 
AAAA -> BBBBB -> 
CCCCCCCCCCCCCCCCCCC -> DD -> EEE -> 
FFFFF -> GGGG -> HHHHH

，但其實我希望它看起來是這樣的：

 
     AAAA -> BBBBB -> 
CCCCCCCCCCCCCCCCCCC -> DD -> EEE -> 
    FFFFF -> GGGG -> HHHHH

，如果你明白我的意思。

我需要使用表而不是浮動div嗎？

來源

2008-11-28 A_M

我認爲你的圖沒有幫助，它看起來像你想要東西居中......但你實際上希望所有的項目都要填充頁面的寬度...... – inspite 2008-11-28 15:53:38

只是其他一些指針。你不應該有空的li標籤，這在語義上是不正確的。同樣在理想的世界中，你應該not give id attributes layout names。

就我個人而言，我會將起始圖像放在ul上，然後將最後的圖像放在最後一個li上。

來源

2008-11-28 20:52:51

可能會看到周圍的標記，以瞭解您具備的元素。您可以嘗試具有margin: 0 auto;

你可能會需要爲每個級別周圍的div周圍股利。

來源

2008-11-28 15:44:22

不要浪費你的時間只是去這裏：

http://www.cssmenubuilder.com/build-breadcrumb-menu

來源

2008-11-28 15:48:20 inspite

感謝您的及時回覆。我會嘗試你的建議。

我目前正在試圖做到這一點，用列表，雖然我也用div的前途未卜。

我試着拉我的JSP的一些HTML，以試圖展示我在哪裏與此。

的跨度有一類「導航」基本上圍繞繪製文本的背景圖像，使它看起來像一個按鈕，以及設置頁邊距/補白/等。我省略了與按鈕繪製直接相關的CSS，因爲這是我們系統中繪製按鈕的標準框架。我已經包含了我正在使用的與工作流直接相關的CSS。

我試圖第一按鈕之前繪製起始圖像，然後繪製每個按鈕後面的背景圖像，以便得出每個按鈕之間的線來表示的流動。然後我在流程結束時得到了一個結束圖像。

<html> 
<body> 

<STYLE> 
#nav, #nav ul { 
    list-style: none; 
    margin: 0px; 
    width: 700px; 
} 

#nav li { 
    list-style: none; 
    float: left; 
    padding-left: 10px; 
    padding-right: 10px; 
    width: auto; 
    background-image: url(/lookandfeel/images/navMenuDiv.gif); 
    background-repeat: repeat-x; 
} 

li#ending { 
    background-image: url(/lookandfeel/images/navMenuRight.gif); 
    background-repeat: no-repeat; 
} 

li#start { 
    background-image: url(/lookandfeel/images/navMenuLeft.gif); 
    background-repeat: no-repeat; 
} 

.navigation a { 
    background-image: url(/pdr/images/navigation.gif); 
} 
</STYLE> 

<ul id="nav" style="width: 100%;border: 1px solid"> 
    <li id="start" /> 
    <LI > 
    <SPAN class="navigation" >AAAAAAAAAA</SPAN> 
    </li> 
    <LI > 
    <SPAN class=navigation >BBBB</SPAN> 
    </li> 
    <LI > 
    <SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN> 
    </li> 
    <LI> 
    <SPAN class=navigation>DDDDDDDDD</SPAN> 
    </li> 
    <LI> 
    <SPAN class=navigation>EEEEEEEE</SPAN> 
    </li> 
    <LI> 
    <SPAN class=navigation>FFFFFFFFFFFFFF</SPAN> 
    </li> 
    <li> 
    <SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN 
    </LI> 
    <li id="ending" /> 
    </ul> 
</body> 
</html>

來源

2008-11-28 16:11:35