将所有 <li> 设置为具有相同的宽度答案

【问题标题】：Set all the <li> to have the same width将所有 <li> 设置为具有相同的宽度
【发布时间】：2015-07-21 22:05:05
【问题描述】：

我想用 bootstrap 构建一个navbar，它里面的所有单元格都将具有相同的宽度。

我尝试了上面的代码，但效果不佳。我该如何解决？

.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
    direction: rtl;
}

.navbar .nav > li {
    float: right;
    display: table-cell;
    width: auto;
    float: none;
    text-align: center;
    direction: rtl;
}
.navbar .nav > li:hover {
background-color: #808080
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 333px 3px 0;
}

示例：http://jsfiddle.net/abzvw0m3/（当屏幕宽度大于 768 像素时）

【问题讨论】：

一个设定的宽度，和最宽的li一样的宽度，还是别的什么？还有……为什么？

标签： css twitter-bootstrap width html-lists

【解决方案1】：

把它改成这个，所有的 li 元素都将有其父元素的 10% 的宽度。

.navbar .nav > li {
    float: right;
    display: inline-block;
    width: auto;
    float: none;
    text-align: center;
    direction: rtl;
    width:10%;
    font-size:12px;
}

【讨论】：

【解决方案2】：

要具有相同的单元格宽度，您必须在ul.nav 上设置规则table-layout: fixed;

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
    direction: rtl;
    table-layout: fixed; 
}

.navbar ul.nav  li {
    float: right;
    display: table-cell;
    width: 100%;
    float: none;
    text-align: center;
    direction: rtl;
}

DEMO HERE

【讨论】：

谢谢，但是
并没有导航宽度的所有宽度。有一些不必要的填充