html - div 中列表的一部分

Question

假设我有一个列表:

<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>

我需要更改动物和鸟类的背景，使其看起来像实心 block 。我试着像这样把它放到 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>

但它没有用。我想把它放在实心矩形中。任何反馈表示赞赏!

Answer 1

试试这个

<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;

}