html - 显示在列表旁边的图像

Question

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

请帮忙。谢谢

Answer 1

从 中取出浮子a。另外：到底是什么border-left:15px solid #fff;，你不是说左边距吗？

Answer 2

试试这个：

<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" />