html - 尽管显示 :block specified，但 li 在同一行

Question

我有这样的代码:

<div id="sidemenu">
<div id="sidemenuhdr">Beauty Courses</div>
<ul id="sidebarmenu">
<li><a href="#"><b>Professional Skincare & Facials</b></a></li>
<li><a href="#"><b>Spray Tanning</b></a></li>
<li><a href="#"><b>Eyelash Extensions</b></a></li>
<li><a href="electricalfacials.htm"><b>Electrical Facials</b></a></li>
<li><a href="holisticfacials.htm"><b>Holistic Facials</b></a></li>
<li><a href="#"><b>Diamond Peel Microdermabrasion</b></a></li>  
<li><a href="#"><b>Natural Facelift Massage</b></a></li>
</ul>
</div>

像这样使用 CSS:

#sidemenu{
width:316px;
float:left;
margin: 5px 10px 5px 0;
background-color:#ffe2d6;
border: 2px solid #3b003b;
display:block;
}

#sidebarmenu{
width:250px;
display:block;
padding:0px; 
margin:2px; 
list-style:none; 
height:20px; 
position:relative; 
z-index:500; 
font-family:arial, verdana, sans-serif;
}

#sidebarmenu li{
float:left; 
}

#sidebarmenu li a{ 
display:block;
height:20px; 
line-height:20px; 
background:none; 
color:#000000; 
text-decoration:none; 
font-size:14px; 
font-weight:bold; 
padding:5px 5px 5px 5px;}

事情是，我得到的结果是

• 专业护肤和面部护理
• 晒黑
• 睫毛增长液
• 电子面部护理整体面部护理
• 钻石皮微晶换肤术
• 自然瘦脸按摩

它将电子面部护理和整体面部护理放在同一条线上。

有什么想法吗？

Answer 1

将#sidebarmenu li 更改为:

#sidebarmenu li{
clear:both;
}

这样就可以了!