制作垂直堆叠在容器内的div，使其宽度相同

Question

我有一个容器div，它有四个垂直堆叠的div。这些div中的每一个都包含文本和页面加载时的更改。我正在尝试为四个堆叠的div设置样式，这样我就可以根据它们是奇数行还是偶数行来更改它们的背景。

我可以做得很好，但我需要堆叠的div和容器一样宽。

<ul class="level2">
<li><div class="subCatodd"><a href="cPath=8">Clothes</a></div></li>
<li><div class="subCateven"><a href="cPath=9">Hats</a></div></li>
<li><div class="subCatodd"><a href="cPath=10">kitchen</a></div></li>
</ul>

我无法获得subCatodd/subCatevendiv来填充ul 的宽度

有人能帮我吗？

编辑：这是我的css（应该已经发布了，对不起）

div#dropMenu ul.level2 {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;background-image:url(../images/dropdownbg.gif); background-repeat:repeat-x;padding:8px 0px; background-color:#7b631d;font-size:13px;white-space: nowrap;}
div#dropMenu ul.level2 a {color: white;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#e0e211;}
.subCatodd{background-color:#7b631d;padding:10px 25px 10px 25px;}
.subCateven {background-color:#665011;padding:10px 25px 10px 25px;}
div#dropMenu ul.level2 {top: 50px;z-index:1000;}

第二版：这是我的确切代码，如果有人能做到这一点，我将不胜感激http://jsfiddle.net/3fazn/2/

Answer 1

如果为奇数divs创建一个子css选择器会更好（如下面提到的jsFiddle所示）。

看看这个jsFiddle：http://jsfiddle.net/SsM4V/12/

这就是你要找的吗？

编辑：修改注释后的jsFiddle

Answer 2

让ul容器浮动，这样它就可以包裹所包含内容的宽度：

ul { float:left; }
.subCatodd { background:#bdb; }
.subCateven { background:#dbd; }

这里有一个fiddle要演示（EDIT：我已经更新了fiddle以使用您的css）。

或者，您可以将display设置为包含ul的内联块，只需知道它在IE7中不起作用，因为默认情况下ul不是内联的。这是那个版本的小提琴。

编辑：这是最新的版本-我在下面的评论中添加了我提到的子选择器，并从你用来斑马线的类中删除了宽度值-这是你想要实现的吗：http://jsfiddle.net/3fazn/7/