我想在900px容器中均匀地拉伸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(即SPECIALTY SERVICES),布局会中断 - 即使整个导航的空间足够多.
有人能为我解决这个问题吗？我一直在网上搜索解决方案,而且它们似乎都很简短.仅在可能的情况下使用CSS/HTML ...
谢谢!
更新(2013年7月29日):使用table-cell是实现此布局的最佳现代方式.请参阅下面的felix的答案.该table cell属性目前在94%的浏览器上运行.你将不得不做一些关于IE7及以下的事情,但否则应该没问题.
更新(2013年7月30日):不幸的是,如果您将此布局与媒体查询相结合,则会出现影响此问题的webkit错误.现在你必须避免更改'display'属性. 请参阅Webkit Bug.
更新(2014年7月25日):现在有一个更好的解决方案,现在涉及text-align:justify.使用它更简单,您将避免Webkit错误.