Question

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

我不想让文字旁边的图标卡住:(

Answer 1

为图片添加页边距 - DEMO

img {
    margin-right: 15px
}

Answer 2

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

HTML：

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

CSS：

a > span {
    text-decoration: underline;
}

Answer 3

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/

Answer 4

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

Answer 5

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

停止在空格上有下划线的链接？

5 个答案: