javascript - 如何使 css-menu 独立于菜单项的数量？

Question

我希望 css-menu 宽度是父元素的 100%。但是，有时菜单有 4 个元素，有时有 5 个元素，我希望菜单独立于此。

看图片。 1和3没问题。现在菜单有 100% 宽度，可以容纳 4 个元素: 现在也是，但是-_-:

现在 5 个元素也都很好(我手动编辑了 css):

我试着用下面的方法来做:
1)我检查用户是否被授权
2) 我计算 li 宽度 (perl),
2) 我尝试更改 li 宽度参数 (js)

Perl

if ($authorised eq true)
{
   $width = 100/5;
}
else
{
   $width = 100/4;
}
$widthString = $width."%";

Perl 中的 JavaScript 代码 print( java here );

<SCRIPT LANGUAGE="JavaScript">
var li = this.document.getElementsByTagName("li"); 
for (var i = 0; i < li.length; i++) { 
    var status = li[i].style.width="'.$widthString.'"; 
    console.log(li[i]);
}
</SCRIPT>

li 的 css:宽度:25%； float :左；
ul 的 css:width: 100%;

但它对我不起作用。

谁能解释一下为什么？对于“css”标签追随者。我有疑问。也许通过我不知道的 css 做起来更容易。

谢谢。

p.s.: 对非英文菜单项感到抱歉，但这不是解决问题所必需的:)

Answer 1

你可以使用 flexbox!它是 CSS3 的一部分，在 all major browsers 中得到支持。 !

工作示例:http://jsfiddle.net/976eh/3/

HTML:

<nav>
    <a>Hello</a>
    <a>World</a>
    <a>Hello</a>
    <a>World</a>
</nav>

CSS:

nav {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
}

nav>a {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    background: #dadada
}

nav>a:nth-child(odd) {
    background: #e5e5e5
}