Html 将图像放置在无序列表框中

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

我在左边有一个菜单，在右边我想放置一个图像-

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

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>

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

小提琴：

.nav{
宽度：自动；
保证金：自动；
字体：普通1em Futura，无衬线；
颜色：#333；
}
.导航a{
颜色：绿色；
}
.导航a:悬停{
颜色：#333；
}
李国荣先生{
浮动：左；
填充：15px；
列表样式：无；
}

我个人建议使用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>

---

这将使第一个

li

元素向右浮动，强制

ul

不在浮动元素周围“折叠”（这将使浮动

li

）。

将您的代码上载到please并给我们链接。您不能在该位置（在

之外）添加

。如果你想在列表旁边放置一个图像，你需要把它放在
ul
之外。我接受了你的建议，让它像这样工作。我只是想知道这是不是最好的加价方式@大卫托马斯——这就是我所追求的。我将尝试使用此选项并删除边界。设置相对位置和溢出隐藏对无序列表有什么作用？我已将前面的注释转换为答案，并试图解释
溢出：隐藏
属性：值的用法。至于
position:relative
，这只是另一种方法的残余（比需要的复杂一点）。
<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>

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