均匀间隔和对齐的水平列表菜单

Question

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

Answer 1

由于CSS本身可以这样做但旧的IE不能，为什么不使用display: table; (and table-cell)作为默认值（你的第二个例子很棒）并使用display: inline; zoom: 1; /* display: inline-block for IE */ padding: 0 Npx;用于IE＆lt; 8借助于条件评论？
也许JS / jQuery如果你真的必须关心IE6 / 7用户，只能为他们服务。

PS：您应该为：焦点

添加规则

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