顯示在列表旁邊的圖像

我有一些代碼具有屬性display-inline。由於這個原因，它會水平顯示列表。現在，我在我的代碼中放置了一張圖片，它出現在列表後面。我希望圖像顯示在列表下方，因此我將列表放置在一個div中，但它仍然顯示在列表旁邊。下面是代碼，顯示在列表旁邊的圖像

<ul id="list-nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Book</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</div><!--navigation div ends--> 
<!--<div>--> 
<img src="Book_Cover-465x540.png" />

CSS列表導航的：

ul#list-nav { 
margin:40px; 
padding:0; 
list-style:none; 
width:525px; 
} 
ul#list-nav li { 
display:inline 
} 
ul#list-nav li a { 
text-decoration:none; 
padding:5px 0; 
width:100px; 
background:#000000; 
color:#eee; 
float:left; 
} 
ul#list-nav li a { 
text-align:center; 
border-left:15px solid #fff; 
}

請大家幫幫忙。由於

來源

2012-05-17 Fahad Uddin

清除您的花車 –

add style =「clear：both;」到你的圖片 –

-1

試試這個：

<div> 
<ul id="list-nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Book</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</div><!--navigation div ends--> 
<!--<div>--> 
<div style="clear:both"></div> 
<img src="Book_Cover-465x540.png" />

來源

2012-05-17 16:39:42 kleinohad

沒有必要清除任何東西，只需刪除不必要的flots。但是如果真的需要做clearfix，那麼有更好的方法：http://www.webtoolkit.info/css-clearfix.html –

從a刪除浮動。另外：什麼是border-left:15px solid #fff;，你不是說左邊緣？

來源

2012-05-17 16:39:53

是的。那就是同樣的事情。實際上使用了教程中的一個片段。 –

你是說邊界和邊界是相同的東西？真？ –

它做同樣的事情。 –

顯示在列表旁邊的圖像

回答

相關問題