如何在指定容器中均匀且完全地拉伸固定数量的水平导航项

Question

我想在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错误.

Answer 1

text-align:justify在容器上使用,无论您在列表中有多少元素,它都可以工作(您不必为每个列表项计算%宽度)

小提琴

    #nav {
        text-align: justify;
        min-width: 500px;
    }
    #nav:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
    #nav li {
        display: inline-block;
    }

CSS

<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

Answer 2

这个确实有效.还有一个好处是,您可以使用媒体查询轻松关闭水平样式 - 例如,如果您想在手机上垂直堆叠它们.

HTML

<ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

?
#nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
    white-space: nowrap;
}?

@media (max-width: 767px) {
    #nav li {
        display: block;
        width: 100%;
    }
}

http://jsfiddle.net/timshutes/eCPSh/416/

Answer 3

如果可以,请使用flexbox:

<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>

ul {
  display: flex;
  justify-content:space-between;
  list-style-type: none;
}

jsfiddle:http://jsfiddle.net/RAaJ8/

浏览器支持实际上非常好(前缀是其他令人讨厌的东西):http://caniuse.com/flexbox

Answer 4

理想的解决方案是:

1. 自动缩放到导航容器的宽度
2. 支持动态数量的菜单项.

使用容器ul内的简单菜单nav,我们可以构建满足上述要求的解决方案.

HTML

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Basic Services</li>
    <li>Specialty Services</li>
    <li>Our Staff</li>
    <li>Contact Us</li>
  </ul>
</nav>

首先,我们需要强制ul其nav容器的整个宽度.为此,我们将使用:afterpsuedo-element width: 100%.

这完美地实现了我们的目标,但是从伪元素添加了尾随空格.我们可以通过设置通过IE8删除所有浏览器这种空白line-height的ul为0,并设置回100%它的li孩子.请参阅下面的示例CodePen和解决方案:

CSS

nav {
  width: 900px;
}

nav ul {
  text-align: justify;
  line-height: 0;
  margin: 0;
  padding: 0;
}

nav ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

nav ul li {
  display: inline-block;
  line-height: 100%;
}