如何使用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在按钮之间水平切分菜单？

回答

相关问题