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

69

我想在900像素的容器中均匀地拉伸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（特殊服务就是），则布局会中断，即使整个导航有足够的空间也是如此。

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

谢谢！

更新（13/7/29 /）：使用表格单元是实现此布局的最佳现代方法。请参阅下面的felix答案。该table cell属性当前可用于94％的浏览器。您必须对IE7及以下版本进行处理，否则应该没问题。

更新（13/30/13）：不幸的是，如果您将此布局与Media Queries结合使用，则会有一个Webkit错误会对此产生影响。现在，您必须避免更改'display'属性。 请参阅Webkit错误。

更新（7/25/14）：现在有一个更好的解决方案，涉及text-align：justify。使用它比较简单，并且可以避免Webkit错误。

html  css  navigation  justify 
— timshutes
source

Answers:

97

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>
展开摘要

小提琴

— 丹尼尔
source
2
的:after风格是关键:)
— 蒂姆·
之后用于拉伸内容以占据100％的宽度
— Danield
13
之所以起作用，是因为text-align: justify确保所有行的长度都相同。在:after风格设定为display: inline-block与width: 100%创建导航中全宽子元素为理由，以匹配的长度。
— 安东尼·迪桑蒂
有什么方法可以最大程度地减少:after伪元素的影响？添加这些样式已经推出一个空行，我似乎不能用收缩margin，padding也不height。这是使用display-inline的不可避免的效果吗？
— Anthony DiSanti
4
关于额外的不必要的垂直空间的新问题，伴随着小提琴，在这里：stackoverflow.com/questions/20134151/...
— 北Krimsly
38

这确实有效。还具有一个优势，您可以使用媒体查询轻松关闭水平样式-例如，如果要在移动电话上垂直堆叠它们。

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

— 克里斯·萨丁格
source
7
此解决方案无法解决问题，在li中添加更长的标题会使空白再次增大，而不是使用与其他项目之间相同的空白
— Jeroen W
如果项目数是固定的，则可以在CSS中将百分比宽度设置为（1.0 / numItems * 100）％。这将给出精确等距的cols。
— 克里斯·萨丁格
该解决方案是最好的现代解决方案。它在ie7上不起作用，但是可以解决。有一段代码缺少尽管对于布局描述：width: 16.666666667%;。或菲利克斯上面说的“（1.0 / numItems的* 100）％，我通过编辑添加到您回答这个问题，因为你的意见在这里有它
— timshutes
14

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

— 三重奏
source
7

理想的解决方案将是：

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

使用容器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的ul为0，并设置回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%;
}
— 安东尼·迪桑蒂
source
如果你想真正好的事情，你会设置nav ul宽度为类似90％，并集margin-left，margin-right来auto有自左那些漂亮的填充和正确，检查CodePen
— Gabrielius
好答案。我尚未在Codepen外部进行测试，但它似乎可以满足我的要求。我不喜欢将宽度放在列表项中进行导航。
— Samia Ruponti 2015年
@Samia Ruponti谢谢，是的，我同意。静态宽度是个问题，尤其是在动态设置中，例如wordpress博客上的菜单，在使用主题的网站之间，静态宽度会有所不同。如果您遇到任何麻烦，请告诉我。
— 安东尼·迪桑蒂
3

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

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

— 黄芪
source
2

这应该为您做。

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

}
— 布赖恩
source
1

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

— BJ萨夫迪
source
1

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

— 尼尔
source
3
从你的嘴唇到上帝的耳朵。令人遗憾的是，到目前为止，我在浏览器中看到的唯一改进是，我们的主要客户最近从IE6迁移到了7。我怀疑我将能够在2020年左右的某个时候利用flexbox。;-)
— BJ Safdie
1

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

我用填充物玩耍，以获取正确的数量，以使物品均匀分布。

— 仁
source
0

除了定义宽度之外，您还可以在li上放置一个左边距，以使间距保持一致，并且只需确保margin + li在900px之内即可。

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

希望这可以帮助。

— 跨国公司
source
0 
<!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>
— 保罗·斯威特
source
-1

我不愿意提供此信息，因为它滥用了旧的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>

这不是创建表要执行的操作，而是在我们可以更好地可靠地执行相同操作之前，我想这几乎是可以允许的。

— ͢bts
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.