我如何使用最小宽度100%仍然按内容扩展?

时间:2014-05-27 00:17:03

标签: css css3 navigation navbar menubar

我有一个菜单很好,但我希望下拉菜单的最小宽度为其上方链接项的100%。用图像更容易说明:

这很好:
1

但我希望这个至少100%宽:
2

我不想要的是他们完全100%宽。我知道该怎么做,但我一直在努力让它们至少 100%宽,但我无法理解。

我正在处理的CSS的主要部分是#menu > ul > li > ul。我尝试将min-width: 100%应用于它,但它们都只是100%。为什么这不起作用?

Here's a fiddle显示我的问题的实时演示,其中包含菜单的所有CSS。

1 个答案:

答案 0 :(得分:1)

这只需要几个小小的调整。

首先,定位您的li亲戚,以便他们明确地成为子级别ul的定位点(这是必要的,以便ul可以带他们的他们父母的最小宽度):

#menu > ul > li {
    position:relative;
}

其次,将ul置于其父li的左侧,并为其提供min-width

#menu > ul > li > ul {
  left:0;
  min-width:100%;
}

通过使用a属性,禁止子级ul内的white-space元素在元素宽度不足时中断:

#menu > ul > li > ul > li > a {
    white-space:pre;
}

http://jsfiddle.net/jLLJu/4/(为了清楚起见,我在CSS的底部添加了我的修改;随意将它们移动到相关元素的其余格式的位置。)