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

我想css菜单宽度将是100%的父元素。 但是，有时菜单有4个项目，有时它有5个项目，我想菜单将独立于此

看看图片。1号和3号没问题。现在菜单的宽度为100%，4个项目的宽度为ok： 现在也是，但是————：

现在5项也都很好（我手动编辑css）：

我试着用下一种方法：
1） 我检查用户是否已授权
2） 我计算li宽度（perl），
2） 我尝试更改li宽度参数（js）

Perl

perl

print中的JavaScript代码（此处为java）

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


var li=this.document.getElementsByTagName（“li”）；
对于（var i=0；i

li的css:
宽度：25%；浮动：左

ul的css:
宽度：100%

但这对我不起作用

谁能解释一下原因吗？和“css”标签追随者。我有疑问。也许通过css更容易做到，我只是不知道

多谢各位

p、 s:对于非英语菜单项很抱歉，但这不是解决问题的必要条件：）
这最好在CSS内部解决。考虑一个具有n列的表：


1.
2.
3.
...
N

您可以为表格提供最大宽度。然后使用
表格布局：fixed
，水平空间在所有单元格中平均分配。请参见–在行中插入更多单元格，并查看空间如何划分

但是不要（错误地）使用表格！相反，您可以使用CSS
display
属性为其他元素指定
表
的行为、
表行
和
表单元格
。毕竟，语义标记很重要

有一个警告：您还应该确保不要插入太多的单元格，以免其内容溢出。设置最小宽度并控制溢出以防止出现这种情况。但是，Flexbox模型有更好的方法来处理此问题（例如，开始另一行）。看看吧


关于Perl代码的注释：
$true
没有任何意义：Perl没有
true
关键字。因此，如果您将
use strict；使用警告在每一个Perl源文件的顶部——在将来考虑使用这个安全网。要测试变量是否包含真值，只需在以下条件中使用它：
if（$authorized）{…}
。要测试它是否实际包含字符串
true
，请使用引号：
if（$authorized eq“true”）{…}
（这是编译器当前解释代码的方式）。
这最好在CSS内部解决。考虑一个具有n列的表：


1.
2.
3.
...
N

您可以为表格提供最大宽度。然后使用
表格布局：fixed
，水平空间在所有单元格中平均分配。请参见–在行中插入更多单元格，并查看空间如何划分

但是不要（错误地）使用表格！相反，您可以使用CSS
display
属性为其他元素指定
表
的行为、
表行
和
表单元格
。毕竟，语义标记很重要

有一个警告：您还应该确保不要插入太多的单元格，以免其内容溢出。设置最小宽度并控制溢出以防止出现这种情况。但是，Flexbox模型有更好的方法来处理此问题（例如，开始另一行）。看看吧


关于Perl代码的注释：
$true
没有任何意义：Perl没有
true
关键字。因此，如果您将
use strict；使用警告在每一个Perl源文件的顶部——在将来考虑使用这个安全网。要测试变量是否包含真值，只需在以下条件中使用它：
if（$authorized）{…}
。要测试它是否实际包含字符串
true
，请使用引号：
if（$authorized eq“true”）{…}
（这是编译器当前解释代码的方式）。
这最好在CSS内部解决。考虑一个具有n列的表：


1.
2.
3.
...
N

您可以为表格提供最大宽度。然后使用
表格布局：fixed
，水平空间在所有单元格中平均分配。请参见–在行中插入更多单元格，并查看空间如何划分

但是不要（错误地）使用表格！相反，您可以使用CSS
display
属性为其他元素指定
表
的行为、
表行
和
表单元格
。毕竟，语义标记很重要

有一个警告：您还应该确保不要插入太多的单元格，以免其内容溢出。设置最小宽度并控制溢出以防止出现这种情况。但是，Flexbox模型有更好的方法来处理此问题（例如，开始另一行）。看看吧


关于Perl代码的注释：
$true
没有任何意义：Perl没有
true
关键字。因此，如果您将
use strict；使用警告在每一个Perl源文件的顶部——在将来考虑使用这个安全网。要测试变量是否包含真值，只需在以下条件中使用它：
if（$authorized）{…}
。要测试它是否实际包含字符串
true
，请使用引号：
if（$authorized eq“true”）{…}
（这是编译器当前解释代码的方式）。
这最好在CSS内部解决。考虑一个具有n列的表：


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

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

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

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
}