均匀间距和对齐的水平列表菜单 [英] Evenly spaced and justified horizontal list menu
问题描述
我搜索,发现没有解决方案来列出一系列列表样式菜单的列表。我实现CSS单独不能做,所以我添加了一些javascript(jQuery)。我不想要每个LI的相同的宽度,我想甚至填充没有剩余空间。如果任何人可以采取这个概念,简化我的可怕的javascript或提供替代品,请这样做。请参见示例: http://www.valweb.com/menuTest/
因为CSS可以这样做,但旧的IE不能,为什么不使用 display:table; (和table-cell)
作为默认值(你的第二个例子是伟大的),并使用 display:inline; zoom:1; / * display:inline-block for IE * / padding:0 Npx;
for IE< 8 with the help of conditional comments?
如果你真的需要JS / jQuery
PS:您应该为:focus 添加规则
.mainMenu li a:hover,
.mainMenu li a:focus {
/ * ... * /
}
作为E. Meyer 在其reset.css样式表的注释中陈述:; - )
/ *记得定义焦点样式! * /
:focus {
outline:0;
}
I searched and found no solution to spacing out a series of lis for a list style menu. I realized CSS alone can't do it so I added some javascript (jQuery). I didn't want the same widths for each LI, I wanted even padding with no leftover space. If anyone can take this concept and simplify my awful javascript or offer alternatives please do so. See example here: http://www.valweb.com/menuTest/
As CSS alone can do so but old IEs can't, why not use display: table; (and table-cell)
as a default (your 2nd example is just great) and use display: inline; zoom: 1; /* display: inline-block for IE */ padding: 0 Npx;
for IE<8 with the help of conditional comments?
And maybe JS/jQuery if you really must care about IE6/7 users, only served to them.
PS: you should add a rule for :focus
.mainMenu li a:hover,
.mainMenu li a:focus {
/* ... */
}
as E. Meyer states in the comments of its reset.css stylesheet: ;-)
/* remember to define focus styles! */
:focus {
outline: 0;
}
这篇关于均匀间距和对齐的水平列表菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!