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

事情是，我得到的结果是

专业护肤品＆amp;面部
喷雾晒黑
睫毛扩展
电动面部整体面部护理
Diamond Peel Microdermabrasion
自然整容按摩

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

有什么想法吗？

Answer 1

将#sidebarmenu li更改为：

#sidebarmenu li{
clear:both;
}

那就行了！

Answer 2

a元素为display:block，但您的li元素为float: left。你到底想要什么？

Answer 3

简短的回答是：

#sidebarmenu li{
    float: left;
    clear: left;
}

如果您只是移除浮子，则不会将粉红色拉伸到底部。那是因为你在height: 20px上设置了#sidebarmenu。

您应该考虑使用尽可能少的样式并将样式与标记分开（即不要在那里使用<b>，使用font-weight。

Answer 4

如果您想从上到下li元素，请删除#sidebarmenu li{float:left; }

li虽然显示：指定了块，但在同一行上

4 个答案: