Html 图像出现在错误的位置

我有一个列表，我想在每一行前面加一个小图片

CSS：

.left div.arrow{背景图像：url（../images/design/box.png）；浮动：左；高度：15px；宽度：15px；右边距：2px；}

.left a.list:link, a:visited, a:active {color:black; font-size:0.8em; text-decoration:none; display:block; float:left;}

HTML：

<div class="panel">My quick links</div>
<div class="arrow"></div>
<a href="/messages.php?p=new" class="list">Send a new message</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#password" class="list">Change my password</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#picture" class="list">Upload a new site image</a>
<br />

我的快速链接

正如你所看到的，每个图像都应该放在书写之前。在第一行，文本“发送新消息”具有前面的图像。但是，之后的每一行末尾都有图像。因此，“发送新消息”的开头和结尾都有一个图像

这就像图像停留在前一行的末尾一样。

---

有什么想法吗？

您可以做更少的工作，并将箭头集成到链接中：

a.arrow {
    background-image: url(../images/design/box.png);
    float:left;
    min-height:15px;
    margin-right:2px;
    display:block;
    background-repeat:no-repeat;
    background-position:0px 0px;
    padding-right:20px
    }

---

如果你想在漂亮的链接和菜单上看到独家新闻，请参见：。

你的
没有清除浮动，它只会下载CSS中列出的特定数量的像素-我猜是8个像素，这不会清除左侧分割中的15个像素浮动背景图像

您需要类似于
或
的样式=“clear:left”将前进到最后一个浮动元素的下方

对于语义，可以将LI设置为块并具有背景图像。如果../images/design/box.png大于15像素，请确保使用溢出样式

更新

.left div.arrow{clear:left; background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}

将是无语义的解决方案