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

Question

我希望css-menu width是父元素的100％。 但是，有时菜单有4个项目，有时它有5个项目，我希望菜单可以独立于此。

看图像。 1＆amp; 3还可以。现在菜单有100％宽度，4件商品可以： 现在也是，但是-_-：

现在所有5件物品都很好（我编辑了css manualy）：

我试着这样做：
2）我尝试改变li宽度参数（js）

的Perl

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

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

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

css for li：width: 25%; float: left;
css for ul：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
}

Answer 2

这最好在CSS内部解决。考虑一个包含 n 列的表：

 <table>
   <tr>
     <td> 1 </td>
     <td> 2 </td>
     <td> 3 </td>
         ...
     <td> n </td>
   </tr>
 </table>

您可以为表格提供最大宽度。然后使用table-layout: fixed，水平空间在所有单元格中平均分配。请参阅jsfiddle here - 在行中插入更多单元格，并查看空间是如何划分的。

但是不要（误）使用表格！相反，您可以使用CSS display属性为其他元素分配table，table-row和table-cell的行为。毕竟，语义标记很重要。

有一点需要注意：您还应该确保不要插入太多内容溢出的单元格。设置最小宽度并控制溢出以防止这种情况发生。但是，Flexbox模型有更好的方法来处理这个问题（例如，开始另一行）。请参阅devian's answer。

---

关于Perl代码的说明：$authorized eq true没有任何意义：Perl没有true个关键字。因此，如果将use strict; use warnings;放在每个Perl源文件的顶部，则无法编译 - 请考虑将来使用此安全网。要测试变量是否包含真值，只需在条件if ($authorized) { ... }中使用它。要测试它是否实际包含字符串true，请使用引号：if ($authorized eq "true") { ... }（这是编译器当前解释您的代码的方式）。

Answer 3

确保您的li元素获得正在显示的元素数量的正确宽度百分比。

如果您有5个元素，则li宽度必须为20％（Example #1）。如果它占25％，则会产生溢出，最终会出现图像＃2（Example #2）。

因此，您的错误必须在您的perl代码中。当你检查它是否被授权时......

希望这有帮助。