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

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 标签中。在较小的菜单项（如“主页”或“关于”）和较大的菜单项（如“基本服务”）之间创建不均匀的空白。

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

谁能帮我解决这个问题吗？我一直在网上寻找解决方案，但它们似乎都不够。如果可能的话，只使用 CSS / HTML...

谢谢！

更新（2013 年 7 月 29 日）：使用表格单元格是实现此布局的最佳现代方法。请参阅下面菲利克斯的回答。 表格单元格属性目前适用于 94% 的浏览器。你必须对 IE7 及以下版本做一些处理，但其他应该没问题。

更新（2013 年 7 月 30 日）：不幸的是，如果您将此布局与媒体查询相结合，则存在一个 webkit 错误会影响这一点。现在您必须避免更改“显示”属性。 查看 Webkit Bug。

更新 (7/25/14)：有一个更好的下面的解决方案现在涉及 text-align: justify。 使用它更简单，并且您将避免 Webkit 错误。

Answer 1

均匀分布项目的现代方法是在容器元素上设置以下两个声明：

.container {
  display: flex; /* (1) */
  justify-content: space-between; /* (2) or space-around or space-evenly */ 
} 

用于 justify-content 的值取决于需要哪种类型的均匀分布。

请参阅MDN

ul {
  list-style: none;
  padding: 0;
  width: 90vw;
  border: 3px solid gold;
  display: flex;
}
a {
  background: gold;
}
ul {
  justify-content: space-between;
}
ul ~ ul {
  justify-content: space-around;
}
ul ~ ul ~ ul {
  justify-content: space-evenly;
}

<h3>justify-content: space-between; </h3>

<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>
<div>Distributes items evenly. The first item is flush with the start, the last is flush with the end </div>
<hr>
<h3>justify-content: space-around;</h3>
<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>
<div>Distribute items evenly. Items have a half-size space on either end</div>
<hr>
<h3>justify-content: space-evenly;</h3>
<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>
<div>Distribute items evenly. Items have equal space around them</div>
<hr>

---

Here's my original answer - if for some reason using a flex container isn't viable

在容器上使用 text-align:justify ，这样无论列表中有多少元素，它都会起作用（您不必计算每个列表项的宽度百分比

    #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

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 & 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. 支持动态数量的菜单项。

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

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 容器的完整宽度。为了实现这一点，我们将使用 :after 伪元素和 width: 100%。

这完美地实现了我们的目标，但添加了伪元素的尾随空白。我们可以通过 IE8 在所有浏览器中删除此空白，方法是将 ul 的 line-height 设置为 0，并将其 li 设置回 100%代码>孩子。请参阅下面的示例 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%;
}

Answer 5

我尝试了以上所有方法，发现它们都不够。这是我能想到的最简单、最灵活的解决方案（感谢以上所有内容的启发）。

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 & DEV</li>
    <li>CONTACT</li>
</ul>
</div>

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

显然，您可以删除第一个/最后一个子圆角末端，但我认为它们是真正的purdy（您的客户也是如此；）

容器宽度限制了水平列表，但您可以放弃它并只应用绝对值如果您愿意，请向 UL 提供价值。

如果你愿意的话，可以摆弄它..

http://jsfiddle.net/tobyworth/esehY/1/< /a>

Answer 6

这应该适合你。

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

}

Answer 7

您是否尝试过将 li 宽度设置为 16%，边距为 0.5%？

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

编辑：我会将 UL 设置为 100% 宽度：

nav ul {
宽度：100%；
保证金：0 自动；
}

Answer 8

CSS flexbox 模型将解决这种问题，因为它可以让您指定每个 li 将接收相同比例的剩余宽度。

Answer 9

我尝试了很多不同的事情，最后发现最适合我的就是简单地添加
padding-right: 28px;

我尝试使用填充来获得适当的填充量以均匀地间隔项目。

Answer 10

您可以不定义宽度，而是在 li 上放置一个 margin-left ，以便间距一致，并确保 margin(s)+li 适合在 900px 之内。

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

希望这有帮助。

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

Answer 12

我很犹豫是否提供这个，因为它滥用了旧的 html。这不是一个好的解决方案，但它是一个解决方案：使用表格。

CSS：

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

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>

这不是创建表格的目的，而是直到我们能够可靠地执行相同的操作以更好的方式我想这只是允许的。