水平列表项

Question

我想建立像GitHub的一个导航条（不使用引导nav*选择 - 请this jsfiddle

所以我有以下的HTML：

<div class="container" style="margin-top: 20px;"> 
    <div class="span9"> 
     <ul class="unstyled main-tabs"> 
      <li> 
       <a href="#">Link1</a> 
      </li> 
      <li> 
       <a href="#">Link2</a> 
      </li> 
      <li> 
       <a href="#">Link3</a> 
      </li> 
     </ul> 
    </div> 
</div> 

注意span9类，我现在用强制导航栏只有9/12我的屏幕占据

下面CSS：

.main-tabs { 
    position: relative; 
    margin-bottom: 20px; 
    font-size: 12px; 
    font-weight: bold; 
    background-color: #eaeaea; 
    background-image: -moz-linear-gradient(#fafafa, #eaeaea); 
    background-image: -webkit-linear-gradient(#fafafa, #eaeaea); 
    background-image: linear-gradient(#fafafa, #eaeaea); 
    background-repeat: repeat-x; 
    border: 1px solid #eaeaea; 
    border-bottom-color: #cacaca; 
    border-radius: 3px; 
} 

.main-tabs a { 
    display: block; 
    text-align: center; 
    line-height: 35px; 
    font-size: 12px; 
    color: #777; 
    text-decoration: none; 
    text-shadow: 0 1px 0 white; 
    border-right: 1px solid #eee; 
    border-right-color: rgba(0,0,0,0.04); 
    border-left: 1px solid #fcfcfc; 
    border-left-color: rgba(255,255,255,0.7); 
    border-bottom: 2px solid #DADADA; 
} 

.main-tabs li { 
    list-style-type: none; 
} 

.main-tabs li .active { 
    border-bottom: 2px solid greenyellow; 
} 

结果是：

我改变.main-tabs li到：

.main-tabs li { 
     list-style-type: none; 
     float: left; 
    } 

然后

.main-tabs li { 
    list-style-type: none; 
    display: block; 
} 

这仍然给出了同样的结果:(

但这并没有真正的帮助。

问题 没有硬编码的li或ul元素（响应事项）的宽度，有没有办法让像在Github上的一个相同的导航栏？

Answer 1

老，尝试和测试方法是使用表格布局：

.nav { 
    display: table; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

.nav li { 
    display: table-cell; 
} 

一个现代化的方法是使用Flexbox的（IE 10+，可能需要大量的前缀，因为有三个版本标准）：

.nav-alt { 
    display: flex; 
    margin: 0; 
    padding: 0; 
} 

.nav-alt li { 
    flex: auto; 
    list-style-type: none; 
} 

演示了两个版本：http://jsfiddle.net/3qM5y/1/

Answer 2

jsFiddle Demo

demo with jQuery and a hover

有解决的几个问题。首先，如果不具体确定每个菜单项的宽度，则必须使用推断宽度。常用的方法是使用用于计算表格单元的内置算法。为此，您需要将容器设置为display:table，将项目设置为display:table-cell。

此外，ul往往有一些默认的填充，你应该在容器上使用padding-left: 0px;删除初始填充。

最后，请确保您的锚元素尺寸合适。这意味着将它们设置为display: inline-block;和width:100%。