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设计它。例如，如果你想要向右或向左等等。

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

Answer 2

我个人建议使用以下方法：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 Fiddle demo

这会将第一个li元素浮动到右侧，迫使ul 不在浮动元素周围“崩溃”（这会使浮动的{{1} } 'sticking out of' the ul）。

将图像放在无序列表框中

2 个答案: