Javascript 等距对齐的水平列表菜单

我搜索了一下，没有找到为列表样式菜单分隔一系列lis的解决方案。我意识到CSS本身无法做到这一点，所以我添加了一些javascript（jQuery）。我不希望每个LI都有相同的宽度，我甚至希望填充没有剩余空间。如果有人能接受这个概念并简化我糟糕的javascript或提供替代方案，请这样做。请参见这里的示例：

因为CSS本身可以做到这一点，而旧的IE不能做到这一点，为什么不使用

display:table；（和表格单元格）

作为默认设置（您的第二个示例非常好），并使用

display:inline；缩放：1；/*显示：IE*的内联块/填充：0 Npx对于IEP，如果你在“谢谢Felipe”上问这个问题，你可能会得到更多有用的答案。我已经习惯于对所有我有一段时间没读过他的评论的东西进行重置。我把css表作为一个我不满意的例子。然而，我发现我的问题差不多一年前就在这里解决了。和我的很相似。
.mainMenu li a:hover,
.mainMenu li a:focus {
  /* ... */
}

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