Question

这是我的HTML

<p>
    <b>Contact for place A</b><br>
    <img class="mail"> your@email.com<br>
    <img class="phone"> +000 111 222 333
</p>
<p>
    <b>Contact for place B</b><br>
    <img class="mail"> anotherr@email.com<br>
    <img class="phone"> +000 333 222 111
</p>

还有一个CSS

html, body {
    font-size: 16px;
}
.mail {
    background-image: url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/net/stock_mail.png");
    width: 16px;
    height: 16px;
}
.phone {
    background-image: url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/generic/stock_landline-phone.png");
    width: 16px;
    height: 16px;
}

这是jsfiddle以更好地看到它http://jsfiddle.net/vLkX8/1/

现在，问题出在哪里。你可以看到该图像上有一个奇怪的边框，我想摆脱他，另一个问题是邮件图标。邮件图标略高于文本。我怎么能把它移到最后？

谢谢。

Answer 1

你是（ab）使用img-tag来做它没有设计的东西。将html更改为

<p>
    <b>Contact for place A</b><br>
    <div class="mail"></div> your@email.com<br>
    <div class="phone"></div> +000 111 222 333
</p>
<p>
    <b>Contact for place B</b><br>
    <div class="mail"></div> anotherr@email.com<br>
    <div class="phone"></div> +000 333 222 111
</p>

和CSS：

html, body {
    font-size: 16px;
}
.mail {
    background-image: url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/net/stock_mail.png");
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-bottom: -3px;
}
.phone {
    background-image: url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/generic/stock_landline-phone.png");
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-bottom: -3px;
}

小提琴：http://jsfiddle.net/Sumurai8/7gzKB/

通过使用内联div-tag，它是无边框的。我已添加display: inline-block，因此div将正确显示在＆＃39; inline＆＃39;中。像这样的上下文。通过将底部边距向上移动3个像素，margin-bottom: -3px将图像向下移动3个像素。

Answer 2

尝试将此添加到您的CSS：

img {vertical-align：bottom}

至于那个边界，很简单：<img>必须有一个src。仅指定背景图像无效。

也就是说，您可以创建1x1透明像素图像并将其用作源，然后使用CSS中的背景图像。

Answer 3

我有一个使用列表项进行标记的工作示例：

http://jsfiddle.net/nickadeemus2002/E67J2/

HTML：

<ul class="contact">
    <li class="li-header">Contact for place A</li>
    <li class="mail"> your@email.com </li>
    <li class="phone"> +000 111 222 333 </li>
</ul>
<ul class="contact">
    <li class="li-header">Contact for place B</li>
    <li class="mail"> anotherr@email.com</li>
    <li class="phone"> +000 333 222 111</li>
 </ul>

的CSS：

html, body {
    font-size: 16px;
}
ul.contact{list-style:none;}
li.li-header{font-weight:bold;}
.mail {
    background: #fff url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/net/stock_mail.png") no-repeat 0% 50%;

}
.phone {
    background: #fff url("http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/stock/generic/stock_landline-phone.png") no-repeat 0% 50%;
}

.mail, .phone{
    padding-left:20px;

}

对我来说，你有一个联系人列表。在每个列表中，您都有关于这些联系人的项目符号项。使用类来制作这些列表项以区分标题，邮件和电话信息会更清晰。如果采用我的方法，为特定类添加bg图像很容易，而且标记更具语义性。

此外，使用我的代码很容易解决相对于文本的图像定位问题。您需要编辑背景图像定位以根据需要排列。

使用CSS background-image删除<img/>上的边框并将其移动一点点

3 个答案: