html

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

第二个问题是，如果导航项目大于 150 像素，则布局会中断，这是 SPECIALTY SERVICES ——即使整个导航有足够的空间。

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

谢谢！

更新（7/29/13）：使用表格单元是实现此布局的最佳现代方式。请参阅下面菲利克斯的回答。该table cell属性目前适用于 94% 的浏览器。您必须对 IE7 及以下版本做一些事情，否则应该没问题。

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

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

score 97 · Accepted Answer

在容器上使用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>

小提琴

score 39 · Accepted Answer

这个真的很管用。还有一个好处是您可以使用媒体查询轻松关闭水平样式 - 例如，如果您想在手机上垂直堆叠它们。

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

score 15 · Accepted Answer

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

score 7 · Accepted Answer

一个理想的解决方案将：

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

使用容器内的简单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为ul0 并将其设置回 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%;
}

score 3 · Accepted Answer

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

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

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/

score 2 · Accepted Answer

这应该为你做。

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

}

score 1 · Accepted Answer

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

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

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

导航 ul { 宽度：100%；边距：0 自动；}

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

我玩弄了填充物以获得正确的数量来均匀地间隔项目。

score 0 · Accepted Answer

不用定义宽度，你可以在你的 li 上放一个 margin-left，这样间距是一致的，并确保 margin(s)+li 适合 900px。

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

希望这可以帮助。

score 0 · Accepted Answer

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

score -1 · Accepted Answer

我很犹豫是否提供这个，因为它滥用了 ye olde 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>

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

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

12 回答 12

HTML

CSS

HTML

CSS

Related

Reference