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

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

Answer 1

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

PS：您应该为：focus添加规则

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

正如E. Meyer 在其reset.css样式表的评论中所述 ：;-)

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