zatrzymać linki z podkreśleniem w przestrzeni?

Czy istnieje sposób w html i css, aby zatrzymać linki z podkreśleniem, gdzie jest spacja? Powiedzmy, że chcę małej ikony z spacją, a następnie tekstem do wszystkich, ale nie ma żadnego powiązania między nimi, czy to możliwe?zatrzymać linki z podkreśleniem w przestrzeni?

ja nie chce mieć ikonę zacięty tuż obok tekstu :(

Źródło

2013-03-02 NaughtySquid

dodać margines do obrazu - DEMO

img { 
    margin-right: 15px 
}

Źródło

2013-03-02 11:57:10

Miło, nigdy o tym nie pomyślałem! – span

Legenda! Dokładnie tego, co chciałem: D – NaughtySquid

Bardzo dobry pomysł. Kolejny dowód, że dużo się uczymy, gdy mamy do czynienia z "prostymi" pytaniami. +1 – mavrosxristoforos

Możesz dodać ikonę i tekst jako dwie oddzielne linki kierujące do tej samej lokalizacji.

Źródło

2013-03-02 11:54:30 SteveP

Hmm, czy to naprawdę jedyny sposób? CSS nie ma sposobu, aby nie stylizować spacji na linki? – NaughtySquid

You . można też mieć dwa osobne łącza (jeden dla ikony i jeden za link) lub można ustawić text-decoration: none; do obu

Źródło

2013-03-02 11:54:57 mavrosxristoforos

To już odpowiedziałeś poniżej. –

Można to zrobić tak: http://jsfiddle.net/mH6vG/

HTML:

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

CSS:

a > span { 
    text-decoration: underline; 
}

Źródło

2013-03-02 11:58:10

Zoltan Toth „s rozwiązanie jest bardzo ładne i proste. +1 za to. Ale pozwól mi też wrzucić moje 0,02 USD. Jeśli nie chcesz mieć dodatkowy znacznik obrazu dla ikony w linku, można również użyć tego:

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; 
}

Demo

http://jsfiddle.net/xQAzy/

Źródło

2013-03-02 12:40:14 insertusernamehere

zatrzymać linki z podkreśleniem w przestrzeni?

Odpowiedz

Powiązane problemy