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

【问题标题】：How to divide a menu horizontaly between buttons , using CSS?如何使用 CSS 在按钮之间水平划分菜单？
【发布时间】：2013-03-16 06:33:30
【问题描述】：

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

现在我有一点问题，假设我有 4 个菜单项，我希望父 div 的总宽度始终除以 4 个菜单项中的每一个，即使在不同的分辨率下...

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

有什么办法吗？

【问题讨论】：

标签： css menu alignment

【解决方案1】：

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

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

【讨论】：

事情是，我尝试使用 %，但它会弄乱整个菜单，例如，当悬停时，项目会弄乱布局并且仅扩展 1 到 25%
嗯，百分比将适用于您想要实现的目标。如果您遇到更多问题，您可能需要调整代码的其他部分。如果没有看到您的代码，我真的无法帮助您。我可以给你this quick example on jsfiddle，演示百分比宽度菜单项和下拉菜单。

【解决方案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 知之甚少 :)

【讨论】：

【解决方案3】：

好吧，John 比我更胜一筹，但我也选择了百分比，因为你特别提到了 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;
}

【讨论】：