如何使用CSS在按鈕之間水平切分菜單？

我有一個像這樣http://www.mrc-productivity.com/forum/cssdropdown.html使用CSS編碼的下拉菜單。如何使用CSS在按鈕之間水平切分菜單？

現在我遇到了小問題，比方說我有4個菜單項，並且我希望即使在不同的分辨率下，父分區的總寬度也可以在任意時間被4個菜單項中的每一個等分。

現在我已經爲每個項目手動設置寬度爲200px，但這不是一個動態單位，因爲它會搞亂不同的分辨率。

有沒有辦法做到這一點？

來源

2013-03-15 spacing

如果您知道確切數量的項目佔用相同的寬度，則應使用百分比。對於四個項目，在任何寬度的父div中，可以將項目的寬度設置爲25％。

爲了避免超過100％的邊框或填充/邊距，最好在您的div上設置box-sizing: border-box;，以便它們的寬度包含這些額外的像素。

來源

2013-03-15 21:12:46 John

的事情是，我嘗試使用％，但它攪亂例如整個菜單時盤旋的項目會弄亂佈局，擴大唯一一個25 ％ – spacing 2013-03-15 22:27:04

那麼，百分比將爲你想要達到的目標而工作。如果遇到更多問題，則可能需要調整代碼的其他部分。沒有看到你的代碼，我不能真的幫你。我可以給你[jsfiddle上的這個快速示例]（http://jsfiddle.net/wTbx9/），展示百分比寬度菜單項和下拉菜單。 – John 2013-03-15 22:48:17

我想我已經明白了。你的榜樣爲我做了！：）謝謝 – spacing 2013-03-15 23:04:31

那麼，約翰擊敗了我，但我也去百分比，因爲你具體說4個要素。還要確保你的li項目被設置爲內聯表格。

http://jsfiddle.net/Lw7Ca/1/

div { 
    margin: 50px; 
    width: 100%; 
    background-color: #f99; 
} 

ul { 
    width: 100%; 
} 

ul li { 
    height: 50px; 
    width: 20%; 
    display: inline-table; 
    border: 1px solid black; 
    padding: 10px; 
}

來源

2013-03-15 21:34:14

如果你不知道你有多少li結束了，你可以使用這一招：

li:nth-child(1):nth-last-child(1)  {width: 100%;} 
li:nth-child(1):nth-last-child(2), 
li:nth-child(1):nth-last-child(2)~ li {width: 50%;} 
li:nth-child(1):nth-last-child(3), 
li:nth-child(1):nth-last-child(3)~ li {width: 33.3333%;} 
li:nth-child(1):nth-last-child(4), 
li:nth-child(1):nth-last-child(4)~ li {width: 25%;} 
li:nth-child(1):nth-last-child(5), 
li:nth-child(1):nth-last-child(5)~ li {width: 20%;}

你得到它如何繼續爲更多更大的數字...

我從一個我不記得的博客裏偷了這個。這是迄今爲止我所見過的最聰明的方法。

它顯示了我，我怎麼一點了解CSS :)

來源

2013-03-15 22:33:30 Raffael

如何使用CSS在按鈕之間水平切分菜單？

回答

相關問題