1

我有一个容器 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/

4

2 回答 2

2

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

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

这是你想要的？

编辑：评论后修改了jsFiddle

于 2012-09-06T16:23:02.930 回答
1

只是浮动你的 ul 容器怎么样，所以它包裹了所包含内容的宽度：

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

这是一个要演示的小提琴（编辑：我已经更新了小提琴以使用您的 css）。

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

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

于 2012-09-06T18:19:17.503 回答