等距且对齐的水平列表菜单答案

【问题标题】：Evenly spaced and justified horizontal list menu等距且对齐的水平列表菜单
【发布时间】：2011-04-20 09:50:12
【问题描述】：

我搜索并发现没有解决方案来为列表样式菜单分隔一系列 lis。我意识到单靠 CSS 做不到，所以我添加了一些 javascript (jQuery)。我不希望每个 LI 的宽度都相同，我什至想要没有剩余空间的填充。如果有人可以采用这个概念并简化我糟糕的 javascript 或提供替代方案，请这样做。在此处查看示例：http://www.valweb.com/menuTest/

【问题讨论】：

如果您在doctype.com提出这个问题，您可能会得到更多有用的答案

标签： javascript jquery css menu center

【解决方案1】：

由于单独的 CSS 可以做到这一点，但旧的 IE 不能，为什么不使用 display: table; (and table-cell) 作为默认值（您的第二个示例非常棒）并在条件 cmets 的帮助下将 display: inline; zoom: 1; /* display: inline-block for IE */ padding: 0 Npx; 用于 IE 如果你真的必须关心 IE6/7 用户，也许 JS/jQuery，只为他们服务。

PS：你应该为 :focus

添加一条规则

.mainMenu li a:hover,
.mainMenu li a:focus {
  /* ... */
}

作为 E. Meyer states in the comments of its reset.css stylesheet: ;-)

/* remember to define focus styles! */
:focus {
  outline: 0;
}

【讨论】：

谢谢费利佩。我已经习惯于对我有一段时间没有真正阅读过他的 cmets 的所有内容进行重置。我以 css 表为例，但我对此并不满意。但是，差不多一年前，我发现我的同样问题在这里解决了stackoverflow.com/questions/1859243/…。和我的很像。