我想在900像素的容器中均匀地拉伸6个导航项目,并且在两者之间留有均匀的空白。例如...
---| 900px Container |---
---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |---
目前,我能找到的最佳方法如下:
nav ul {
width: 900px;
margin: 0 auto;
}
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 150px;
}
与此相关的问题有两个。首先,它并不能真正证明其合理性,而是将li标签均匀地分布在整个ul标签中。在“ HOME”或“ ABOUT”等较小菜单项与“ BASIC SERVICES”等较大菜单项之间创建不均匀的空格。
第二个问题是,如果导航项大于150px(特殊服务就是该布局),则布局会中断,即使整个导航有足够的空间也是如此。
谁能为我解决这个问题?我一直在网上寻找解决方案,但它们似乎都不够用。CSS / HTML仅在可能的情况下...
谢谢!
更新(13/29/29):使用表格单元是实现此布局的最佳现代方法。请参阅下面的felix答案。该table cell属性当前可用于94%的浏览器。您必须对IE7及以下版本进行处理,否则应该可以。
更新(13/30/13):不幸的是,如果您将此布局与Media Queries结合使用,则会有一个Webkit错误会对此产生影响。现在,您必须避免更改'display'属性。 请参阅Webkit错误。
更新(7/25/14):现在有一个更好的解决方案,涉及text-align:justify。使用它比较简单,并且可以避免Webkit错误。
交互式爱情