CSS: Linkin bir parçasının altını çizin

Metnin normalde fareyle üzerine gelindiğinde metnin normalde altı çizili olduğu bir bitişik bağlantıya sahip olmak mümkün mü, ortada bu alt çizgi olmadan bir bölüm (örn. Resim) var mı? Bu işe yaramazsa:CSS: Linkin bir parçasının altını çizin

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

kaynak

2010-06-04 Biggles

Gerçekten bir görüntü olmasını istedik Ne bağlantıları "ekli" html ile mümkün olup olmadığını bilmek istiyorum.

padding-left

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>

o görüntüyü örtüşmeyen böylece metni mahsup içindir: Burada ile geldi bir çözümdür.

background-position ile görüntüyü daha iyi hale getirmek için görüntüyü metinle hizalanmış şekilde taşıyabilirsiniz.
görüntü görünümünü çimdik padding-bottom için kullanılabilir ve metin padding-üst yüksekse.

Bu teknik aynı zamanda CSS sprite böyle ile kullanılabilir:

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

Umut:

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

yerine sıradan satır içi görüntülerin CSS sprite kullanmak benzer bir teknik kullanılmıştır Bu,

kaynak

2010-07-09 12:57:19 Biggles

'unuzun metnini sarmak ve daha sonra bu arka plan sprite tekniğini kullanan CSS sınıfını eklemek benim için çok iyi çalıştı. –

<a href="#" style="text-decoration:none;"> 
    <span style="text-decoration:underline;">one</span> 
    two 
    <img src="img.png" style="border:0px; text-decoration:none;"> three 
</a>

Ben sadece aşağıdaki gibi javascript kullanarak mümkün olabilmektedir düşünüyorum.

BAKIŞ SONRASI Örnek

<html> 
<head></head> 
    <style> 
    a{ 
     text-decoration:none; 
    } 

    a:hover 
    { 
     text-decoration:none; 
    } 

    .sample 
    { 
     text-decoration:underline; 
    } 

    .sample_none 
    { 
     text-decoration:none; 
    } 
    </style> 
    <script type="text/javascript"> 
     function show_underline(){ 
     document.getElementById('sample').className= 'sample'; 
     } 

     function hide_underline(){ 
     document.getElementById('sample').className= 'sample_none'; 
     } 
    </script> 
    <a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span> 
    <img src="img.png" style="border:0px;"> three 
    </a> 


</body> 
</html>

P.S. o vurgulu üzerinde altı çizili almadan o css ve sadece

kaynak

2010-06-04 07:40:02 Salil

'un birisine yardımcı olur. Bu, alt çizginin sürekli olmasını zorlar. Ve gezginin üstesinden gelmek için özel bir sınıf yaparsam, bitişik bağlantıyı kırar. – Biggles

Lütfen kodunuzu tamamladıktan sonra yapıştırın. Gezinmeyi nasıl idare ettiğini bilmek isterim. neways Gerçekten İyi Bir Soru :) – Salil

Salil: Daha fazla test edildikten sonra problemimi çözmediğimi keşfettim. – Biggles

a, a:hover { text-decoration: underline; } 
a img, a:hover img { text-decoration: none !important; }

kaynak

2010-06-04 08:28:25 eyelidlessness

Vurgulu olduktan sonra ikide altını çizmek istiyorum ve ikide olmasa nasıl yapabilirim? – Salil

Stiller: a, a: vurgulu {text-decoration: underline; a img, a: hover img, span.two {text-decoration: none! Önemli; kenarlık: 0; } ve işaretleme: one two three – eyelidlessness

Bunlardan hiçbiri işe yaramaz. Görüntü hala altı çizili. – Biggles

CSS: Linkin bir parçasının altını çizin

cevap

İlgili konular