javascript - 等间距且对齐的水平列表菜单

Question

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

Answer 1

既然 CSS 单独可以做到，而旧的 IE 不能，为什么不使用 display: table; (和表格单元格) 作为默认值(您的第二个示例非常好)并使用 display: inline;缩放:1；/* display: inline-block for IE */padding: 0 Npx; for IE<8 在条件注释的帮助下？
如果您真的必须关心 IE6/7 用户，也许 JS/jQuery 只为他们服务。

PS:你应该为 :focus 添加一条规则

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