Javascript 如何根据水平菜单的li调整水平菜单的大小？

我的代码中有7个菜单。根据用户类型，有时可能是6个。如果输入admin，它将是7个。用户可能只有6个菜单。 如何动态调整菜单的大小。 为此，我使用了代码

<div id="menu">
<ul>
<li><a href="#">home1</a></li>
<li><a href="#">home2</a></li>
<li><a href="#">home3</a></li>
<li><a href="#">home4</a></li>
<li><a href="#">home5</a></li>
<li><a href="#">home6</a></li>
<li><a href="#">home7</a></li>
</ul>
</div>

---

假设期望的结果是在一行中呈现上述菜单，而不考虑项目的确切数量-

实现这一点的最佳方法是使用表，因为它们具有这种类型的本机行为，占用了很长的一行，并在上面均匀分布了项。好的是，我们可以很容易地利用

#menu { display: table; width: 100%; }
#menu ul { display: table-row; }
#menu ul li { display: table-cell; }

这将使用容器的宽度，自动在一条长线上分配容器

---

您还可以通过上面的示例看到。

假设所需的结果是在一行中呈现上述菜单，而不考虑项目的确切数量-

实现这一点的最佳方法是使用表，因为它们具有这种类型的本机行为，占用了很长的一行，并在上面均匀分布了项。好的是，我们可以很容易地利用

#menu { display: table; width: 100%; }
#menu ul { display: table-row; }
#menu ul li { display: table-cell; }

这将使用容器的宽度，自动在一条长线上分配容器

---

您还可以通过上面的示例看到。

假设hexblot的答案不是您想要的，并且您希望在容器元素的宽度上分布不同宽度的LI，而LI不一定占据导航栏的整个宽度，则使用以下方法：

---

假设hexblot的答案不是您想要的，并且您希望在容器元素的宽度上分布不同宽度的LI，而LI不一定占据导航栏的整个宽度，那么使用以下方法：

---

使用“显示内联块”代替表格单元格：

#menu { display: inline-block;background:#000; }
#menu ul { display: inline-block; margin:0;padding: 0; }
#menu ul li { display: inline-block; margin:0; padding: 0;}
#menu ul li a { display: inline-block; padding: 10px; color: #fff;}
#menu ul li a:hover { color: #ff0;}

---

在此处拨弄：

使用显示内联块代替表格单元格：

#menu { display: inline-block;background:#000; }
#menu ul { display: inline-block; margin:0;padding: 0; }
#menu ul li { display: inline-block; margin:0; padding: 0;}
#menu ul li a { display: inline-block; padding: 10px; color: #fff;}
#menu ul li a:hover { color: #ff0;}

---

---

在这里摆弄：

要清楚：您希望上面的内容显示在一行中，占据整个宽度？我们需要查看您的css，这取决于它的样式，它将在不需要jquery的情况下调整大小。另一种方法是使用自动边距将菜单居中。但是，如果您真的需要调整菜单的大小，那么可以使用Jquery，这很简单。首先，为您的li创建两个宽度不同的类。类别1:li_7类别2:li_6那么，你必须数一数菜单上的li数。如果您有6个li，添加类li_6 else li_7，然后，@hexblot实际上我想根据li调整菜单的大小。ul是100%。您可能有li as块或内联块。如果您这样做，并且您使用百分比来定义li的宽度，那么只要容器ul具有固定的宽度，就可以了。要明确的是：您希望上面的内容显示在占据整个宽度的一行中？我们需要查看您的css，这取决于它的样式，它将调整大小而不需要jquery。另一种方法是使用自动边距将菜单居中。但是，如果您真的需要调整菜单的大小，那么可以使用Jquery，这很简单。首先，为您的li创建两个宽度不同的类。类别1:li_7类别2:li_6那么，你必须数一数菜单上的li数。如果您有6个li，添加类li_6 else li_7，然后，@hexblot实际上我想根据li调整菜单的大小。ul是100%。您可能有li as块或内联块。如果你这样做了，并且你使用百分比来定义li的宽度，那么只要容器ul有一个固定的宽度，就可以了。答案很好，尽管不要用表格来回答，因为这给出了错误的想法。这个答案不使用表格，而是使用CSS显示：table，这是非常不同的，而且更合适-如果我有6个菜单。它是全宽的吗？@Agent1看看他链接到的JSFIDLE，然后尝试添加或删除一些列表项。@ralph.m：我的意思是我们在模仿表的行为，Agent1：它对任何数量的项都是全宽的，只要它们是真的fit@Agent1：使用上述代码，您不需要设置宽度。它是由CSS自动设置的，完全删除相关的JS代码。有这样的宽度是一个要求吗？答案很好，但不要说是表格，因为这样会给出错误的想法。这个答案不使用表格，而是使用CSS显示：table，这是非常不同的，而且更合适-如果我有6个菜单。它是全宽的吗？@Agent1看看他链接到的JSFIDLE，然后尝试添加或删除一些列表项。@ralph.m：我的意思是我们在模仿表的行为，Agent1：它对任何数量的项都是全宽的，只要它们是真的fit@Agent1：使用上述代码，您不需要设置宽度。它是由CSS自动设置的，完全删除相关的JS代码。是否要求具有该宽度？如果hexblot正确解释了问题，则添加比li更大的宽度，然后突然中断。这种方法将使所有菜单项保持在左侧，而不是像我的答案中那样均匀分布。你可以很容易地使用任何一个更可取的方法

---

havior.我想检查jquery中的菜单。如果它有6个菜单，则必须使用全宽度，然后添加比li更大的宽度，如果hexblot正确解释了问题，则突然中断。这种方法将使所有菜单项保持在左侧，而不是像我的回答中那样均匀分布。你可以很容易地使用任何一个更可取的行为。我想检查jquery中的菜单。如果它有6个菜单，它必须是全宽的