我搜索后发现没有解决方案,无法将一系列lis分隔为列表样式菜单。我意识到仅靠CSS无法做到这一点,所以我添加了一些javascript(jQuery)。我不希望每个LI都具有相同的宽度,我甚至希望没有剩余空间的填充。如果有人可以接受这个概念并简化我的糟糕javascript或提供替代方法,请这样做。在此处查看示例:http://www.valweb.com/menuTest/
最佳答案
仅靠CSS就能做到,而旧的IE无法做到,为什么不使用display: table; (and table-cell)
作为默认值(您的第二个例子很好),并在条件注释的帮助下对IE display: inline; zoom: 1; /* display: inline-block for IE */ padding: 0 Npx;?
也许是JS / jQuery,如果您真的必须关心IE6 / 7用户,则只为他们服务。
PS:您应该为添加规则:focus
.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;
}