为 CSS 菜单项设置固定大小答案

【问题标题】：Setting a Fixed Size for CSS Menu Items为 CSS 菜单项设置固定大小
【发布时间】：2014-04-18 14:06:37
【问题描述】：

我正在尝试为 CSS 驱动的水平菜单导航中的所有项目分配相同的大小（宽度）。正如您从链接示例中看到的那样，“li”大小是根据内部字符串的长度呈现的。现在我的问题是如何为项目设置固定大小（例如：全部为 80 像素）？你能看看下面的例子： http://jsfiddle.net/Behseini/hBDv9/

我也想知道如何在 box(div) 中居中菜单栏

感谢您的时间和 cmets

【问题讨论】：

我已经做到了。你读过帖子吗？ jsfiddle.net/Behseini/hBDv9

标签： html css

【解决方案1】：

设置“a”元素的宽度。

http://jsfiddle.net/hBDv9/2/

如果需要，您还可以应用以“a”为中心的文本。

【讨论】：

你不需要display: inline-block，仅供参考。
正确 - 没有注意到“浮动”声明。
感谢 Brilliand 这行得通，你能告诉我如何将文本元素（项目）居中在框（li）中吗？
text-align: center a 会这样做，如果我理解你想要什么。
非常感谢您对我的意思有很好的理解:-)

【解决方案2】：

将width: 80px; 添加到#nav li a 和#nav li a:hover。

【讨论】：

嗨，Elliot，谢谢，但这仅适用于悬停！现在我有 80 像素的完美尺寸，但只是悬停！
确保您也将其添加到#nav li a。
是的，我做到了，它在悬停时有效，但在正常情况下无效！
对不起，我想我错过了您评论中的@“#nav li a”，非常感谢

【解决方案3】：

要使 li 元素具有您需要使用的相同大小：

#nav li {
  display:inline-block;
  width:80px;
}

使一个元素在另一个元素中居中：

div.wrapper { width:100%;}
div.wrapper .centered {
  display:inline-block;
  width:80%; // or whatever you want it to be
  margin: 0 auto;
}

这有帮助吗？

【讨论】：

嗨 MaddHacker，感谢您将部分居中，但第一部分不起作用