改變高度和寬度的水平列表

Question

我想提出一點顏色代碼圖例的網站，並無法弄清楚如何使我的所有<li>項的李元素相同的高度DIV他們在廣他們出去，讓他們補全格，不只是周圍的標籤文本的區域（或者另一個建議，使其更好看？）

這裏是我現在有：

http://jsfiddle.net/JZCKm/

我覺得我在網上嘗試了很多不同的例子，但我仍然無處可去。請協助

Answer 1

你LIs和labels是內聯的元素和不具有高度或寬度。我申請display:block你LIs和labels，浮動你LIs左側，應用高度和寬度爲LIs。

ul#navlist { 
    list-style:none; 
} 
#navlist li { 
    position:relative; 
    float:left; 
    padding-right: 30px; 
    width:120px; 
    height:50px; 
} 
#navlist li label { 
    position:relative; 
    display:block; 
    height:100%; 
    width:100%; 
} 

http://jsfiddle.net/JZCKm/3/

Answer 2

我建議取下標籤標記，且每個類移動到裏，像這樣的：

<li Class="gvRowReqComplete">Complete</li> 

然後如果你改變了李顯示器inline-block的你能爲他們指定了一套高度。您還可以將每個李的文字居中。

li { 
    display: inline-block; 
    list-style-type: none; 
    text-align: center; 
    padding: 6px 12px; 
} 

正如你可以在這裏看到：http://jsfiddle.net/SFZJv/2/

我添加了參考灰色背景。