0

这是我的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/

现在，问题出在哪里。如您所见，该图像上有一个奇怪的边框，我想摆脱他，另一个问题是邮件图标。邮件图标比文本高一点。我怎样才能把它移到底部？

谢谢你。

4

3 回答 3

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 将正确显示在这样的“内联”上下文中。margin-bottom: -3px通过将底部边距向上移动 3 像素，将图像向下移动 3 像素。

于 2013-07-01T19:09:08.847 回答
0

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

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;

}

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

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

于 2013-07-01T19:13:24.160 回答
0

尝试将此添加到您的 CSS 中：

img {垂直对齐：底部}

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

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

于 2013-07-01T19:01:23.243 回答