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

Question

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

现在我有一点问题，假设我有 4 个菜单项，我希望父 div 的总宽度始终被 4 个菜单项中的每一个平均划分，即使在不同的分辨率下也是如此......

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

有什么办法吗？

Answer 1

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

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

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 项目设置为 inline-table。

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;
}