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

Question

我想用 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 像素时）

Answer 1

要具有相同的单元格宽度，您必须在 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

Answer 2

尝试添加宽度

.navbar .nav > li {
float: right;
display: table-cell;
width: auto;
float: none;
text-align: center;
direction: rtl;
width: 15%;;    /* add the width use % for dinamic**/
}

Answer 3

改为这样，所有 li 元素的宽度都是其父元素的 10%。

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

Answer 4

将您的 li 更改为具有固定宽度或百分比宽度的值，该值类似于您将使用的最大 li，

例如：

width: 132px;

或

width: 20%;

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

Set all the <li> to have the same width

css

width

html-lists

twitter-bootstrap