Html 从父元素强制宽度

我有一个主菜单

#navi

。它的项目有不同的宽度。子菜单的宽度应与其父菜单的宽度相同。我制作了一个JsBin来演示它：

非常非常长的子菜单

不应比其父菜单更宽

以下是HTML：

  <ul id="navi">
    <li class="menu1">Menu </li>
    <li class="menu2">A longer menu 
      <ul class="children">
        <li>A very very very long submenu</li>
        <li>Submenu</li>
      </ul>
    </li>
    <li class="menu3">Menu item</li>
  </ul>

---

问题：

• 让父元素在不固定

  css

  width参数的情况下限制子元素

解决方案

• 将子宽度设置为0px以测量本机父宽度
• 测量后设置子宽度和父宽度

jQuery：

$('.children li').css('width', 0);
$('.children li').css('width', $('.menu2').width());

---

解决方案：首先设置父元素的高度。然后关注子元素的宽度

只要把它放在你的css代码中

.menu2{
max-width:140px;
}

这是JSFIDLE

已编辑

如上所述，您不知道父元素的宽度。您可以为子元素指定最大宽度，以限制其宽度

---

像这样

加宽机？这是什么？为.menu2.设置一个宽度。在你的jsbin中，我看不出有什么错误，但你应该始终为浮动的li添加一个宽度。你还需要用一些东西包装你的文本，这样可以更容易地控制大小。@dowomenfart请再次阅读我的问题：“非常非常长的子菜单不应该比其父菜单宽，而应该是更长的菜单。”我无法为.menu2添加固定宽度，因为我不知道它的宽度。如果答案满足您的需要，请标记为已解决。问题是，孩子的最大宽度由其家长决定。但父对象的宽度是动态的。我在寻找类似于“最大宽度”的内容：父菜单的“宽度自动”声明.menu2宽度不能固定。@user1930254实际上，通过给父元素指定“最大宽度”，意味着“父菜单的宽度不会超过此宽度”。我打赌一定有一个限制，你不希望你的父母菜单变得更广泛了。试试看，我认为这是你的完美解决方案。以上答案是解决您问题的好办法。

.menu2{
max-width:140px;
}