Question

我有一个使用CSS编码的http://www.mrc-productivity.com/forum/cssdropdown.html下拉菜单。

现在我没有什么问题，假设我有4个菜单项，我希望父div的总宽度可以平均分配4个菜单项中的每一个，即使在不同的分辨率下...... / p>

现在我为每个项目手动设置宽度为200px宽，但这不是一个动态单位，因为它会搞乱不同的分辨率。

有什么办法吗？

Answer 1

如果您知道具有相同宽度的确切数量的项目，则应使用百分比。对于四个项目，在任何宽度的父div中，您可以将项目的宽度设置为25％。

为了避免使用边框或填充/边距超过100％，最好在div上设置box-sizing: border-box;，以便它们的宽度包含这些额外的像素。

Answer 2

如果你不知道你最终会有多少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的了解甚少：）

Answer 3

好吧，约翰打败了我，但是因为你特意说了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;
}

如何使用CSS在按钮之间水平划分菜单？

3 个答案: