如何在指定容器中均匀且完全地拉伸固定数量的水平导航项 [英] How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

问题描述

我想在一个 900 像素的容器上均匀地拉伸 6 个导航项，并且在它们之间留有均匀的空白空间.比如……

I'd like to stretch 6 nav items evenly across a 900px container, with an even amount of white space between. For instance...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

目前，我能找到的最佳方法如下:

Currently, the best method I can find to do this is the following:

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")之间创建不均匀的空白区域.

The PROBLEM with this is two fold. First of all, it doesn't truly justify it, but rather spreads the li tags evenly throughout the ul tag.. creating uneven white-space between smaller menu items like "HOME" or "ABOUT" and larger ones like "BASIC SERVICES".

第二个问题是，如果导航项目大于 150 像素，则布局会中断，专业服务就是这样 - 即使整个导航有足够的空间.

The second problem is that the layout breaks if a nav item is larger than 150px, which SPECIALTY SERVICES is - even though there is more than enough space for the whole nav.

谁能帮我解决这个问题?我一直在网上搜索解决方案，但它们似乎都不够用.仅在可能的情况下使用 CSS/HTML...

Can anyone solve this for me? I've been scouring the web for solutions, and they all seem to come up short. CSS / HTML only if possible...

谢谢！

更新(2013 年 7 月 29 日):使用 table-cell 是实现此布局的最佳现代方式.请参阅下面菲利克斯的回答.table cell 属性目前适用于 94% 的浏览器.您必须对 IE7 及以下版本做一些事情，否则应该没问题.

UPDATE (7/29/13): Using table-cell is the best modern way to implement this layout. See felix's answer below. The table cell property works on 94% of browsers currently. You'll have to do something about IE7 and below, but otherwise should be ok.

更新(2013 年 7 月 30 日):不幸的是，如果您将此布局与媒体查询结合使用，则会有一个 webkit 错误会影响这一点.现在，您必须避免更改显示"属性.查看 Webkit 错误.

UPDATE (7/30/13): Unfortunately, there is a webkit bug that impacts this if you're combining this layout with Media Queries. For now you'll have to avoid changing the 'display' property. See Webkit Bug.

更新(2014 年 7 月 25 日):下面有一个更好的解决方案，现在涉及 text-align: justify.使用它更简单，您将避免 Webkit 错误.

UPDATE (7/25/14): There is a better solution to this below now involving text-align: justify. Using this is simpler and you'll avoid the Webkit bug.

推荐答案

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

Use text-align:justify on the container, this way it will work no matter how many elements you have in your list (you don't have to work out % widths for each list item

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

<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>

FIDDLE

这篇关于如何在指定容器中均匀且完全地拉伸固定数量的水平导航项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！