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 / subCateven div来填充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

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

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

这是你在找什么？

编辑：在评论

后修改了jsFiddle

Answer 2

如何浮动你的ul容器，以便它包含所包含内容的宽度：

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

这是一个fiddle来演示（编辑：我已经更新了使用你的CSS的小提琴。）

或者你可以将显示设置为包含ul的内联块，只要知道它在IE7中不起作用，因为默认情况下ul不是内联的。这是该版本的fiddle。

编辑：这是最新版本 - 我在评论中添加了下面提到的子选择器，并从您使用的类中删除了宽度值到斑马条纹 - 这就是你的'重新尝试：http://jsfiddle.net/3fazn/7/

使容器内垂直堆叠的div具有相同的宽度

2 个答案: