14

html と css に、リンクにスペースがある場所に下線を付けるのを止める方法はありますか? スペースとテキストの付いた小さなアイコンをすべてリンクにしたいが、それらの間にリンクがない場合、それは可能ですか?

テキストのすぐ横にアイコンを詰め込む必要はありません:(

4

5 に答える 5

23

画像に余白を追加する -デモ

img {
    margin-right: 15px
}
于 2013-03-02T11:57:10.730 に答える
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 に答える
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 に答える
0

アイコンとテキストを、同じ場所を指す 2 つの個別のリンクとして追加できます。

于 2013-03-02T11:54:30.670 に答える
0

2 つの個別のリンク (アイコン用とリンク用) を設定text-decoration: none;することも、両方に設定することもできます。

于 2013-03-02T11:54:57.210 に答える