1

垂直に積み重ねられた4つのdivを持つコンテナdivがあります。これらの各divには、ページの読み込み時のテキストと変更が含まれています。奇数行か偶数行かに応じて背景を変更できるように、4つのスタックされた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;}

2番目の編集： これが私の正確なコードのフィドルです。誰かがこの作業を行うことができれば、私は非常に感謝します http://jsfiddle.net/3fazn/2/

4

2 に答える 2

2

（後述のjsFiddleに示すように）css奇数の子セレクターを作成するとよいでしょう。divs

この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を含むulのインラインブロックに表示を設定することもできますが、ulはデフォルトではインラインではないため、IE7では機能しないことを知っておいてください。これがそのバージョンのフィドルです。

編集：これが最新バージョンです-コメントに以下で言及した子セレクターを追加し、zebra-stripeに使用しているクラスから幅の値を削除しました-これはあなたが達成しようとしていることです：http：// jsfiddle .net / 3fazn / 7 /

于 2012-09-06T18:19:17.503 に答える