İnatçı alt çizgiyi bağlantıdan kaldır

542

Alt çizgi olmadan beyaz renkli bir bağlantı göstermeye çalışıyorum. Metin rengi beyaz olarak doğru görünüyor, ancak mavi alt çizgi inatla devam ediyor. Denedim text-decoration: none;ve text-decoration: none !important;CSS bağlantı alt çizgi kaldırmak için. İkisi de işe yaramadı.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Snippet'i genişlet

Mavi alt çizgiyi bağlantıdan nasıl kaldırabilirim?

css hyperlink underline

— dmr
kaynak

1

Metin süslemesi yaptığınızda kaybolmalıdır: yok. Bunu doğru elemana uyguladığınızdan emin misiniz? Örnek kod verebilir misiniz?

— Davor Lucic

Metin dekorasyonu nerede: hiçbiri kullanılmıyor mu?

— shuttle87

771

Beklediğim gibi, text-decoration: none;bir anchor ( .boxhead a) öğesine değil, span span ( .boxhead) öğesine başvuruyorsunuz .

Bunu dene:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

— Davor Lucic
kaynak

12

Ama metin ne varsa çevreleyen yanı süresi ve çevredeki metin bağlantısı altını olmasını istiyoruz ama span içinde metin hiç birini?

— JMTyler

4

@rebus, Yapamaz mısın? Neden olmasın? Çünkü en azından IE7 + ve FireFox 4 + 'da yapabilirsiniz, ancak bir nedenden dolayı Chrome'da olmayabilir. İşte test ettiğim Chrome olmayan tarayıcılarda çalışmam gereken kod: .toc-list a > span{text-decoration:none !important;} Sanırım @ JMTyler'ın sorusu meşru; Aynı çözümü arıyorum.

— Tony Topper

7

Görünen text-decorationyukarıda ima olarak, iç içe etiketlere geçersiz kılma desteklemez. Bir kez bir a { text-decoration: underline; }kural uygulanmış olamaz ile örneğin o de uygulamak a .wish_this_were_not_underlined { text-decoration: none; }. Bunun için bir referans bulamıyorum ancak bu benim deneyimim (Chrome'da).

— Parçalı Bulutlu

2

Yukarıdaki diğerleri gibi, metni uygulayarak metnin altını çizemedim, text-decoration: none;bunun yerine satırı kullanarak gizlemeyi seçtik text-decoration: underline; text-decoration-color: white;. / kesmek

— Ryan Burbidge

1

yalnızca alt çizgiyi çapanın içindeki bir öğeden kaldırmaya çalışıyorsanız, çapanın tamamını değil. iç elemanı böyle bir satır içi blok haline getirmeniz gerekir: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

— Patrick Denny

213

Bağlantı etiketi (bağlantı) ayrıca ziyaret edilen, üzerine gelme, bağlantı ve etkin gibi sözde sınıflara sahiptir. Stilinizin söz konusu durumlara uygulandığından ve başka bir stilin çakışmadığından emin olun.

Örneğin:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

Kullanıcı eylemi sözde sınıfları hakkında daha fazla bilgi için W3.org adresine bakın : vurgulu ,: etkin ve: odak.

— JYelton
kaynak

5

Sanırım dediğin a:linkzaman demek istiyorsuna:click

— artlung

6

Düğme bağlantımı tıkladıktan SONRA aynı sorunu yaşadığım için bu kabul edilen gerçek cevap olmalıdır. Sayfaya geri döndüğümde ziyaret edilen mülk hala mora değişiyordu.

— Doresoom

33

text-decoration: none !importantborder-bottom: 1px solidhakkında bir gizleme olmadığından emin misin? (IE'de Firebug / F12'de hesaplanan stili izleyin)

— Alex K.
kaynak

4

Ayarı border-bottom-style: none;benim için düzeltti.

— Helder S Ribeiro

27

Bu özelliği bağlantı etiketinize eklemeniz yeterlidir

style="text-decoration:none;"

Misal:

<a href="page.html"  style="text-decoration:none;"></a>

Veya CSS yolunu kullanın.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

— Nagarajan SR
kaynak

16

Bazen gördüğünüz şey bir alt çizgi değil, bir kutu gölgesidir.

Bunu deneyin (sizin için uygun olan CSS seçicileri kullanarak):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

— jeffmjack
kaynak

1

Bu cevap olmalı .. Bazen, kutu gölgesi altı çizili bir etki verir.

— Bhargav

Bu bir cevap, ama en iyisi değil. Bunların kapsamı küreseldir ve spesifik değildir. Böyle bir şey hile yapmalıdır .otherPage a:link {text-decoration:none;}:; ziyaret için aktif, aktif ve gerekirse üzerine gelin.

— Ajowi

14

Sen cevapsız text-decoration:noneiçin bağlantı etiketinin . Bu yüzden kod aşağıdaki gibi olmalıdır.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

Snippet'i genişlet

Metin süslemesi için daha standart özellikler

— Santosh Khalse
kaynak

9

Sayfayı görmeden, spekülasyon yapmak zor.

Ama bana bir border-bottom: 1px solid blue;uygulaman var gibi gelebilir . Belki de ekleyin border: none;.text-decoration: none !importantdoğru, yine de o CSS geçersiz kılıyor başka bir stil olması mümkündür.

Bu kullanarak nerede Çubuğu Firefox Web Developer harika, hemen orada CSS düzenleme ve işler en azından Firefox için, çalışıp çalışmadığını görebilirsiniz. Altında CSS > Edit CSS.

— artlung
kaynak

9

Kural olarak, "alt çizginiz" metninizle aynı renk değilse [ve "renk:" geçersiz kılınmazsa "," metin-dekorasyon: "öğesinden gelmez." Kenar-alt: "olmalıdır

Pseudo derslerinden de sınırı çıkarmayı unutmayın!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Bu pasaj, bir çapa olduğunu varsayar, buna göre sarmalayıcısına geçer ... ve kök nedenini izledikten sonra "! Önemli" yerine özgüllüğü kullanır.

— Joel Crawford-Smith
kaynak

4

Diğer cevaplar doğru olsa da, tüm bu sinir bozucu bağlantılarda alt çizgiden kurtulmanın kolay bir yolu var:

a {
   text-decoration:none;
}

Bu, alt çizgiyi sayfanızdaki HER TEK LINK'ten kaldıracaktır!

— yarz teknoloji
kaynak

diğer bağlantılarda alt çizgiyi isteyebilirsiniz, çünkü bu tutturucu etiket ve satır içi daha iyi olabilir emin olun.

— Asuquo12

2

Çalışmazsa text-decoration: noneveya border: 0çalışmazsa, html'nize satır içi stil uygulamayı deneyin.

— Deke
kaynak

1

Sadece özelliği kullanın

border:0;

ve sen örtüsün. Metin dekorasyon özelliği dint hiç çalıştığında benim için mükemmel çalıştı.

— MK Sandhu
kaynak

1

Cevapların hiçbiri işe yaramadı. Benim durumumda bir standart vardı

a:-webkit-any-link {
text-decoration: underline;

kodumda. Temel olarak, bağlantı ne olursa olsun, metin rengi maviye döner ve bağlantı her neyse kalır.

Bu yüzden başlığın sonuna kodu şöyle ekledim:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

ve sorun artık yok.

— Neo
kaynak

1

  a {
    color: unset;
    text-decoration: unset;
  }

— itzhar
kaynak

0

İşte asp.net webforms LinkButton denetimi için bir örnek:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Arkasındaki kod:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

— JoshYates1980
kaynak

0

Metin seçiciyi yanlış seçicide kullanmadınız. Dekorasyon için hangi etikete ihtiyacınız olduğunu kontrol etmeniz gerekmiyor.

Bu kodu kullanabilirsiniz

.boxhead h2 a{text-decoration: none;}

VEYA

.boxhead a{text-decoration: none !important;}

VEYA

a{text-decoration: none !important;}

— Md Abul Beşar
kaynak

0

Aşağıdaki HTML kodunu <BODY>etiketin önüne yerleştirin :

<STYLE>A {text-decoration: none;} </STYLE>

— qarly_blue
kaynak

0

Benim durumumda, HTML'yi kötü oluşturdum. Bağlantı bir <u>etiketin içinde değil, bir <ul>etiketin içindeydi.

— mwilcox
kaynak

0

Diğerlerinin de belirttiği gibi, iç içe metin dekorasyon stillerini geçersiz kılamıyorsunuz gibi görünüyor ... AMA metin dekorasyon rengini değiştirebilirsiniz.

Kesmek için rengi şeffaf olarak değiştirdim:

metin-dekorasyon-rengi: şeffaf;

— Ben
kaynak