李上雖然顯示同一行：塊指定

我有一些像這樣的代碼：李上雖然顯示同一行：塊指定

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

事情是，我得到的結果是

專業護膚&面部護理
日光浴噴霧
睫毛擴展
電氣面部護理整體面部護理
鑽石磨皮去皮
自然整容按摩

它是把機電面部護理和整體面部護理在同一行。

任何想法？

來源

2011-11-09 user1037234

請考慮提供的答案，並接受你認爲是最好的 - 其中一些解決這個問題，因爲我已經測試 –

的a元素display:block，但你的li元素float: left。你期望什麼？

來源

2011-11-09 14:23:08

-1

只是刪除#sidebarmenu li{float:left; }如果你從上到下

來源

2011-11-09 14:27:35 Mrlitty

我嘗試了同樣的起初，但它doesn' t work。需要清除t他對齊。 –

要li元素簡短的回答是擺在：

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

如果你只是刪除浮動，你不會得到粉紅色伸展到底部。那是因爲你已經在#sidebarmenu上設置了height: 20px。

你應該考慮儘可能少的風格可能和從標記（即不使用<b>有，使用的字體重量

來源

2011-11-09 14:27:49

謝謝，這是做的伎倆！ – user1037234

變化#sidebarmenu李本分開造型：

#sidebarmenu li{ 
clear:both; 
}

這會做的伎倆！

來源

2011-11-09 14:29:58

李上雖然顯示同一行：塊指定

回答

相關問題