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

我个人建议使用 HTML 的以下方法：

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

和 CSS：

ul {
    /* ensures that the 'ul' doesn't collapse and clip the floated 'li' */
    overflow: hidden;
    /* purely for aesthetics, and to visualise the content-box */
    width: 50%;
    margin: 2em auto;
    border: 2px solid #000;
}
li {
    list-style-type: none;
    background-color: #ffa;
}
li:first-child {
    float: right;
    width: 75px;
    height: 500px;
}

li img {
    background-color: #fff;
}

JS 小提琴演示。

这会将第一个元素浮动li到右侧，强制ul 不要在浮动元素周围“折叠”（这会使浮动元素li “伸出”ul）。

Answer 2

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

小提琴：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>