如何在指定的容器中均匀、完整地展开固定数量的水平导航项

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

我想把6个nav项目均匀地延伸到一个900px的容器上，中间留出均匀的空白。例如……

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

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

这个问题有两个方面。首先，它并没有真正的证明它的合理性，而是在整个ul标签中均匀地传播了li标签。在“HOME”或“ABOUT”等较小的菜单项和“BASIC SERVICES”等较大的菜单项之间创建不均匀的空白区域。

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.

第二个问题是，如果一个导航项目大于150px，那么布局就会中断，而专业服务是——即使整个导航的空间足够大。

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

有人能帮我解决这个问题吗?我一直在网上寻找解决方案，但它们似乎都不够。CSS / HTML，如果可能的话……

Thanks!

谢谢!

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.

更新(7/29/13):使用表格单元是实现这个布局的最好的现代方法。请参阅下面的felix的回答。表单元格属性目前适用于94%的浏览器。你必须对IE7和下面的内容做些什么，否则应该没问题。

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.

更新(7/30/13):不幸的是，如果您将这个布局与媒体查询结合在一起，就会出现一个webkit错误。现在，您必须避免更改“display”属性。看到Webkit Bug。

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.

更新(7/25/14):这里有一个更好的解决方案，包括文本对齐:正当性。使用它更简单，您将避免Webkit错误。

12 个解决方案

#1

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

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

FIDDLE

小提琴

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

CSS

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

#2

This one really works. Also has the benefit that you can use media queries to easily turn off the horizontal style — for instance if you want to stack them vertically when on mobile phone.

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

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/

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

#3

if you can, use flexbox:

如果可以，使用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/

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

Browser support is actually quite good (with prefixes an other nasty stuff): http://caniuse.com/flexbox

浏览器支持实际上相当不错(带有其他一些讨厌的东西的前缀):http://caniuse.com/flexbox

#4

An ideal solution will:

一个理想的解决方案:

1. Automatically scale to the width of the navigation container
2. 自动缩放到导航容器的宽度
3. Support a dynamic number of menu items.
4. 支持动态数量的菜单项。

Using a simple ul menu inside of an nav container, we can build a solution that meets the above requirements.

使用一个简单的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>

First, we need to force the ul to have the full width of its nav container. To accomplish this, we will use the :after psuedo-element with width: 100%.

首先，我们需要强制ul拥有其nav容器的全部宽度。为此，我们将使用:psuedo-element宽度:100%。

This achieves our goal perfectly, but adds trailing whitespace from the psuedo-element. We can remove this whitespace across all browsers through IE8 by setting the line-height of the ul to 0 and setting it back to 100% on its li children. See the example CodePen and solution below:

这很好地实现了我们的目标，但是添加了来自psuedo元素的尾随空格。我们可以通过IE8在所有浏览器中删除这个空格，方法是将ul的行高度设置为0，将其li子程序的行高度设置为100%。参见下面的示例代码页和解决方案:

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%;
}

#5

This should do it for you.

这应该对你有用。

<div id="nav-wrap">
    <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>
</div>

#nav-wrap {
    float: left;
    height: 87px;
    width: 900px;
}

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

.nav-item {
    float: left;
    height: 87px;
    line-height: 87px;
    text-align: center;
    text-decoration: none;
    width: 150px;

}

#6

I tried all the above and found them wanting. This is the simplest most flexible solution I could figure out (thanks to all of the above for inspiration).

我尝试了所有的方法，发现他们都想要。这是我能想到的最简单最灵活的解决方案(感谢以上所有的灵感)。

HTML

HTML

<div id="container">
<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>
</div>

CSS

CSS

div#container{
  width:900px;
  background-color:#eee;
    padding:20px;
}
ul {
    display:table;
    width: 100%;
    margin:0 0;
    -webkit-padding-start:0px; /* reset chrome default */
}
ul li {
    display:table-cell;
    height:30px;
    line-height:30px;
    font-size:12px;    
    padding:20px 10px;
    text-align: center;
    background-color:#999;
    border-right:2px solid #fff;
}
ul li:first-child {
    border-radius:10px 0 0 10px;
}
ul li:last-child {
    border-radius:0 10px 10px 0;
    border-right:0 none;
}

You can drop the first/last child-rounded ends, obviously, but I think they're real purdy (and so does your client ;)

显然，您可以去掉第一个/最后一个子圆角端点，但我认为它们是真正的purdy(您的客户也是;)

The container width limits the horizontal list, but you can ditch this and just apply an absolute value to the UL if you like.

容器宽度限制了水平列表，但是您可以抛弃它，只对UL应用绝对值。

Fiddle with it, if you like..

如果你愿意，就去摆弄它。

http://jsfiddle.net/tobyworth/esehY/1/

http://jsfiddle.net/tobyworth/esehY/1/

#7

Have you tried setting the li width to, say, 16% with a margin of 0.5%?

你有没有试过把李的宽度设为16%，幅度为0.5%?

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 16%;
  margin-right: 0.5%;
}

edit: I would set the UL to 100% width:

编辑:我将UL设为100%宽度:

nav ul { width: 100%; margin: 0 auto; }

nav ul{宽度:100%;保证金:0汽车;}

#8

This is the sort of thing that the CSS flexbox model will fix, because it will let you specify that each li will receive an equal proportion of the remaining width.

这是CSS flexbox模型将解决的问题，因为它可以让您指定每个li将获得与其余宽度相等的比例。

#9

I tried so many different things and finally found what worked best for me was simply adding in padding-right: 28px;

我尝试了很多不同的东西，最后发现对我最有效的方法就是简单的添加——对吧:28px;

I played around with the padding to get the right amount to evenly space the items.

我摆弄着填充物，以得到合适的数量来均匀地分配物品。

#10

Instead of defining the width, you could just put a margin-left on your li, so that the spacing is consistent, and just make sure the margin(s)+li fit within 900px.

不需要定义宽度，你可以在你的li上放一个留白，这样间距是一致的，只需要确保边界(s)+li在900px以内。

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  margin-left: 35px;
}

Hope this helps.

希望这个有帮助。

#11

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>

  <div id="container">
    <object>
      <div>
      alpha
      </div>
    </object>
    <object>
      <div>
      beta
      </div>
    </object>
    <object>
      <div>
      charlie
      </div>
    </object>
    <object>
      <div>
      delta
      </div>
    </object>
    <object>
      <div>
      epsilon
      </div>
    </object>
    <object>
      <div>
      foxtrot
      </div>
    </object>
    <span></span>
  </div>
</html>

#12

I'm hesitant to offer this as it misuses ye olde html. It's not a GOOD solution but it is a solution: use a table.

我不愿提供这个，因为它误用了您的老html。这不是一个好的解决方案，但它是一个解决方案:使用表格。

CSS:

CSS:

table.navigation {
    width: 990px;
}
table.navigation td {
    text-align: center;
}

HTML:

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="navigation">
    <tr>
        <td>HOME</td>
        <td>ABOUT</td>
        <td>BASIC SERVICES</td>
        <td>SPECIALTY SERVICES</td>
        <td>OUR STAFF</td>
        <td>CONTACT US</td>
    </tr>
</table>

This is not what tables were created to do but until we can reliably perform the same action in a better way I guess it is just about permissable.

这并不是创建表的目的，但在我们能够以更好的方式可靠地执行相同的操作之前，我想这是可以实现的。