均匀间距和对齐的水平列表菜单 [英] 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屋！