从父元素强制宽度

时间:2015-03-17 12:17:07

标签: html css

我有一个主菜单#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;
}

2 个答案:

答案 0 :(得分:2)

问题:

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

<强>解

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

jQuery的:

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

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

答案 1 :(得分:0)

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

把它放在你的css代码中

.menu2{
max-width:140px;
}

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

<强>被修改

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

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