列表旁边显示的图像 [英] Image displaying next to the list

问题描述

我有一些代码，具有属性 display-inline 。因此，它水平显示列表。现在，我在我的代码中放置一个图像，它出现在列表后面。我想要的图像显示在列表下面，所以我把列表放入一个div，但它仍然显示在列表旁边。这里是代码，

I have some code that has the property display-inline. Due to this it displays the list horizontally. Now, I placed an image in my code and it appeared after the list. I wanted the image to be displayed below the list so I placed the list into a div but still its getting displayed next to the list. Here is the code,

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

list-nav的CSS：

CSS of list-nav:

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

请帮忙。感谢

推荐答案

尝试：

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

这篇关于列表旁边显示的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！