align li標籤有自動寬度vs硬編碼

我在嘗試獲取一組li標籤以對齊我想要的時遇到問題。align li標籤有自動寬度vs硬編碼

我有一些基本的HTML

<div class="menu"> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 
</div>

和一些CSS

.menu 
{ 
border:solid 2px red; 
width:520px; 
} 

ul 
{ 
border:solid 1px #e5e5e5; 
height:40px; 
margin:0 auto; 
list-style:none; 
width:500px; 
} 

li{ 

text-align:center; 
display:inline; 
margin:10px; 

}

我不想硬代碼裏寬度爲每一個元素，但我想爲li元素佔用所有可用的空間與ul元素。

我需要更改什麼才能獲得我要找的結果？

My attempt on jsfiddle

來源

2012-04-06 Diver Dan

我知道這是一個老生常談，但這裏有一個班輪使用jQuery：'$（ '禮'），CSS（ '寬'，$（ 'UL'）。 width（）/ $（'li'）。length）;' – bdares 2012-04-06 05:20:28

我不明白你的問題嗎？ – 2012-04-06 05:22:25

什麼意思是由李元素佔用所有可用空間的ul元素。 – Saurabh 2012-04-06 06:06:19

如果我明白你的問題可能不得不使用display：table屬性這一點。像這樣寫：

ul 
{ 
    border:solid 1px #e5e5e5; 
    height:40px; 
    margin:0 auto; 
    list-style:none; 
    width:500px; 
    display:table; 
} 

li{ 
display:table-cell; 
text-align:center;  
}

入住這http://jsfiddle.net/XmcGh/2/

來源

2012-04-06 05:25:45 sandeep

打我吧！但是我會補充說明，對這種樣式的支持非常強大，但並不完美，所以Dan應該在所有目標瀏覽器中進行測試。但是*得到很好的支持的是......桌子！我不知道我們什麼時候對桌子過敏，但是如果它應該像桌子一樣，爲什麼不使用桌子？但無論如何，以上依然是我會給出的第一個答案。 – 2012-04-06 05:30:18

IE7不受支持，但人們使用的其他東西都是。除中國外，大多數地方的IE7使用率都下降了幾個百分點。我說滴支持！ – mrtsherman 2012-04-06 05:32:27

如果display: table;和display: table-cell;不剪，你可以使用百分比寬度和浮動。儘管這種做法違背了你的「無硬代碼寬度」要求。雖然百分比會隨着各種查看端口大小而變化。

這也只適用於<li>的數量不變的情況。

喜歡的東西：

<ul> 
<li>one</li> 
<li>two</li> 
<li>three</li> 
<li>four</li> 
</ul> 

ul { 
width: 100%; 
} 
li { 
float: left; 
text-align: center; 
width: 30%; 
}

來源

2012-04-06 07:32:20 hungerstar

align li標籤有自動寬度vs硬編碼

回答

相關問題