均匀间隔和正确的水平列表菜单

Question

我搜索，没有找到解决方案间隔一系列列表样式菜单。我意识到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 < 8的条件注释的帮助？
也许JS/jQuery，如果你真的必须关心IE6/7用户，只有服务于他们。

PS：你应该添加一个规则：重点

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

为E.迈耶states in the comments of its reset.css stylesheet：;-)

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