14

在 html 和 css 中是否有任何方法可以停止在有空格的地方有下划线的链接？假设我想要一个带空格的小图标，然后将文本全部作为链接，但它们之间没有链接，这可能吗？

我不想让图标卡在文本旁边:(

4

5 回答 5

23

为图像添加边距 -演示

img {
    margin-right: 15px
}
于 2013-03-02T11:57:10.730 回答
1

你可以这样做：http: //jsfiddle.net/mH6vG/

HTML：

<a><i class="icon-file"></i> <span>My link text</span></a>

CSS：

a > span {
    text-decoration: underline;
}
于 2013-03-02T11:58:10.883 回答
1

Zoltan Toth的解决方案非常简单。为此+1。但让我也投入我的 0.02 美元。如果您不想在链接中为图标添加额外的图像标签，也可以使用以下方法：

HTML

<a href="">Some lorem ipsum text</a>

CSS

a {
    vertical-align: top;
}

a:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    background: transparent url(http://lorempixel.com/20/20) no-repeat 0 0;
}

演示

http://jsfiddle.net/xQAzy/

于 2013-03-02T12:40:14.640 回答
0

您可以将图标和文本添加为​​指向同一位置的两个单独链接。

于 2013-03-02T11:54:30.670 回答
0

您可以有两个单独的链接（一个用于图标，一个用于链接），也可以同时设置text-decoration: none;。

于 2013-03-02T11:54:57.210 回答