Question

我有一个列表，我希望在每行上都有一个小图片。

CSS：

.left div.arrow{background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right: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 />

如您所见，每张图片都应该在写作之前进行。在第一行，文本“发送新消息”具有前面的图像。但是，之后的每一行都有最后的图像。所以“发送新消息”在开始和结束时都有一个图像。

就像图像停留在上一行的末尾。有什么想法吗？

Answer 1

您可以减少工作量并将箭头集成到链接本身中：

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
    }

如果您希望scoop看起来很漂亮的链接和菜单，请参阅：I love lists。

Answer 2

你的＆lt; br /＆gt;不会清除浮动它只会提前下载CSS中列出的特定数量的像素 - 我猜测下调了8个像素，并且不能清除左边划分中的15像素浮动背景图像。

你需要像＆lt; br style =“clear：left”/＆gt;这样的东西。或＆lt; br style =“clear：both”/＆gt; style =“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;}

将是无语义解决方案

图像出现在错误的地方

2 个答案: