0

私がリストを持っているとしましょう：

<ul>
   <li>
     Animals
     <ul>
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li>
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

動物や鳥の背景を変更して、固体のように見えるようにする必要があります。私はそれを次のようにdivに入れようとしました：

<ul>
   <div id='foo'>
   <li>
     Animals
     <ul>
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li>
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   </div>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

しかし、それは機能していませんでした。実線の長方形にしたい。フィードバックをいただければ幸いです。

4

5 に答える 5

2

これを試して 

<ul>
   <li class="animal>
     Animals
     <ul">
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li class="animal>
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

CSS：幅を設定して、すべて同じ幅になるようにします

.animal 
{
   width:200px;
   background-color:green;

}
于 2012-04-11T19:14:04.620 に答える
1

CCSクラススタイルを使用して、それらを<li>要素に適用します。リスト内に他のタイプの要素を配置することは、有効なHTMLではありません。

CSS：

.mystyle {
    /* Whatever */
}

マークアップ：

<li class="mystyle"></li>
于 2012-04-11T19:12:24.757 に答える
0

divULで要素を使用することはできませんが、次の2つの方法で使用できます。

1）cssクラスを鳥と動物に手動で設定します。

<ul>
   <li class='someBackground'>
     Animals
     <ul>
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li class='someBackground'>
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

2）CSS3セレクターを使用します。

ul li:nth-child(1),ul li:nth-child(2) {
    //your css code
}
于 2012-04-11T19:13:13.683 に答える
0 
<ul>
   <li id="animals">
     Animals
     <ul>
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li id="birds">
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

CSS：

#animals, #birds {
background:green;
}
于 2012-04-11T19:14:11.723 に答える
0

1つのliの下に置いた鳥と動物の両方のリストを変更し、スタイルを適用しました。

私をそこに向けてくれてありがとう！:)

于 2012-04-19T14:08:26.887 に答える