html - 将图像放在无序列表框中

Question

在同一元素框中将图像放置在列表右侧的最佳方式是什么？

我在左边有一个菜单，在右边我想放一张图片 -

这样做会导致图像偏移菜单项之间的垂直高度:

CSS

#Menu {
    float: left;
margin-left: 100px;
width: 500px;
text-align: left;
background-color: rgba(246,255,151,.9);
height: 400px;
border-style: solid;
border-color: black;
}

html

<div id="Menu">
    <ul>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Photos</a> </li>
        <li><a href="#">About</a><img src="image.jpg" width="75" height="500"></li>
    </ul>
</div>

Answer 1

这是您要找的吗？如果是这样，您可以只使用 img 标签并使用 css 设置样式。比如你想向右还是向左等等。

fiddle :http://jsfiddle.net/uXNHh/1

.nav {
    width:auto;
    margin:auto;
    font: normal 1em Futura, sans-serif;
    color:#333;
}
.nav a {
    color:green;
}
.nav a:hover {
    color:#333;
}
.nav ul li {
    float:left;
    padding:15px;
    list-style:none;
}

    <div class="nav">
        <ul> <a href="#"><li>Home
            <img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" width="25" height="25"/>
            </li></a>
     <a href="#"><li>About
            <img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" width="25" height="25"/>
            </li></a>
     <a href="#"><li>Contact
            <img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" width="25" height="25"/>
            </li></a>

        </ul>
    </div>