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

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

已邀请:

12 个回复

鞋扣蚊冈借

在容器上使用text-align:justify，无论您在列表中有多少元素，它都可以工作（您不必为每个列表项计算％宽度）小提琴

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

社攻取墟槽

这个确实有效。还有一个好处是，您可以使用媒体查询轻松关闭水平样式 - 例如，如果您想在手机上垂直堆叠它们。 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/

响摔衅幸

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

担每棱绰

理想的解决方案是：自动缩放到导航容器的宽度支持动态数量的菜单项。使用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容器的全宽。为实现这一目标，我们将使用:afterpsuedo-element和width: 100%。这完美地实现了我们的目标，但是从伪元素添加了尾随空格。我们可以通过IE8将line-height的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%;
}

昧伎

这应该为你做。

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

}

瓜唱鬼

我尝试了以上所有，发现他们想要。这是我能想到的最简单，最灵活的解决方案（感谢以上所有的灵感）。 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;
}

显然，你可以放弃第一个/最后一个孩子圆形的结尾，但我认为它们真的是纯粹的（你的客户也是如此;）容器宽度限制了水平列表，但您可以放弃它，如果您愿意，只需将绝对值应用于UL。摆弄它，如果你喜欢.. http://jsfiddle.net/tobyworth/esehY/1/

秃拳割

您是否尝试将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自动; }

笛驮型迸

这是CSS flexbox模型将修复的那种东西，因为它可以让你指定每个li将获得相等比例的剩余宽度。

疮痪徘弦漏

我尝试了很多不同的东西，最后发现对我来说最好的只是加入 padding-right: 28px; 我玩了填充物以获得适当数量的均匀空间物品。

募磷

您可以在左侧放置一个边距，而不是定义宽度，以便间距保持一致，并确保边距（+）+ li适合900px。

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

希望这可以帮助。

蹦吃舷弦

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

习让休堂溯

因为它误用了你的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>

这不是创建表格的原因，但是在我们能够以更好的方式可靠地执行相同的操作之前，我猜它只是允许的。

要回复问题请先登录或注册

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

12 个回复

发起人

justify

问题状态

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

与内容相关的链接

12 个回复

发起人

justify

问题状态