显示在列表旁边的图像

我有一些代码具有属性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

是的。那就是同样的事情。实际上使用了教程中的一个片段。 –

你是说边界和边界是相同的东西？真？ –

它做同样的事情。 –

显示在列表旁边的图像

回答

相关问题