Question

我有一个主菜单#navi。它的物品有不同的宽度。子菜单应该与父母一样宽。我制作了一个JsBin来演示它：http://jsbin.com/yusunohage/1

A very very very long submenu不应超过其父A longer menu。

以下是 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

ol, ul {
  list-style: none;
  padding: 0;
}
#navi > li {
  padding: 0 10px;
}

li {
  float: left;
}
 ul.children{
   background: gold;


 }

#navi li ul li {
  float:none;
}

Answer 1

问题：

让父元素限制子元素而不修复css宽度参数。

<强>解

将子宽度设置为0px，以便测量本机父宽度。
测量后使用父宽度设置子宽度。

jQuery的：

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

此处的解决方案：http://jsfiddle.net/urahara/4m5vkkk2/2/

Answer 2

首先设置父元素的高度。然后关心子元素的宽度。

把它放在你的css代码中

.menu2{
max-width:140px;
}

这是Jsfiddle http://jsfiddle.net/nwL1hku4/

<强>被修改

如上所述，您不了解父元素的宽度。您可以为子元素指定 max-width ，以限制其宽度。

喜欢这个http://jsfiddle.net/nwL1hku4/1/

从父元素强制宽度

2 个答案: