วิธีลบการขีดเส้นใต้สำหรับจุดยึด (ลิงค์)?

313

มีอยู่แล้ว (ใน CSS) เพื่อหลีกเลี่ยงการขีดเส้นใต้สำหรับข้อความและลิงค์ที่แนะนำในหน้า ..

html css underline

8

<penantic> คุณไม่สามารถสรุปได้ว่าเบราว์เซอร์จะแสดง HTML ของคุณอย่างไร แท็กแสดงถึงจุดยึดที่เบราว์เซอร์เลือกที่จะแสดงเป็นขีดเส้นใต้ตามค่าเริ่มต้น คุณเป็นแท็กขีดเส้นใต้เท่านั้น คำตอบด้านล่างคือคำตอบของ CSS </pendantic>

— บัญชีที่ตายแล้ว

44

ประชดที่ใครบางคนอวดดีพอที่จะทำให้ความคิดเห็นนี้ แต่ไม่อวดรู้พอที่จะสะกดคำอย่างถูกต้อง (หรือแม้กระทั่งสม่ำเสมอ!) พัดใจของฉัน

— Technetium

นอกจากคำตอบด้านล่างแล้วa:hoverควรพิจารณาการจัดการเบราว์เซอร์ยอดนิยมส่วนใหญ่มักจะแสดงขีดเส้นใต้บนจุดยึดเมื่อวางเมาส์เหนือ

— Fr0zenFyr

517

ใช้ CSS สิ่งนี้จะเป็นการขีดเส้นใต้ออกจากaและuองค์ประกอบ:

a, u {
    text-decoration: none;
}

บางครั้งคุณจำเป็นต้องแทนที่ลักษณะอื่น ๆ สำหรับองค์ประกอบซึ่งในกรณีนี้คุณสามารถใช้!importantตัวดัดแปลงในกฎของคุณ:

a {
    text-decoration: none !important;
}

— Emil Vikström
แหล่งที่มา

1

ถ้าcolor: black !important;จะเพิ่มสำหรับสิ่งbodyนั้นจะกำหนดองค์ประกอบทั้งหมดรวมถึงจุดยึดเยี่ยมชมจุดยึดจุดยึดที่มีสีดำเสมอหรือไม่

— Ωmega

egamega Δไม่ชัดและขอบคุณที่คุณชี้ให้เห็นว่าฉันพบข้อผิดพลาดในกฎของร่างกายโดยรวม ฉันได้อัพเดตคำตอบแล้ว

— Emil Vikström

สิ่งที่ฉันพบคือถ้าคุณกำหนดสไตล์text-decoration: none !important;สำหรับbodyองค์ประกอบแล้วมันจะทำงานสำหรับจุดยึดเฉพาะเมื่อคุณกำหนดสไตล์text-decoration: inherit;สำหรับaองค์ประกอบอย่างชัดเจน

— Ωmega

7

โดยทั่วไปจะดีกว่าที่จะหลีกเลี่ยง!importantและใช้ความเฉพาะเจาะจงและความสำคัญเป็นสำคัญในการแทนที่สไตล์มิฉะนั้นคุณสามารถจบด้วยสไตล์ชีทที่เต็มไปด้วย!importantโดยไม่ต้องมีความเข้าใจในโครงสร้างที่จำเป็น มันเป็นรหัสกลิ่น IMO

— Mike Lyons

!importantก็เหมือนการมีพี่เลี้ยง แต่เมื่อคุณเริ่มต้นและถูกล่อลวงให้ใช้!importantองค์ประกอบอื่น ๆ อาจจะได้รับมัน (นุก) และข้อได้เปรียบก็หายไปจากความอับจนซึ่งเป็นสิ่งที่ดีสำหรับโลกในขณะที่โคลนมั่นใจความสงบ แต่ในโลกของ CSS ความสงบเช่น หมายความว่าคุณไม่สามารถให้อะไรได้เปรียบ

— JasonGenX

27

CSS คือ

text-decoration: none;

และ

text-decoration: underline;

— Dandan
แหล่งที่มา

16

นี่จะเป็นการลบสีของคุณรวมถึงขีดเส้นใต้ที่มีแท็กสมออยู่ด้วย

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }

— Ashwin Shahi
แหล่งที่มา

11

ตัวเลือกที่ง่ายที่สุดคือ:

<a style="text-decoration: none">No underline</a>

แน่นอนว่าการผสม CSS กับ HTML (เช่น inline CSS) ไม่ใช่ความคิดที่ดีโดยเฉพาะเมื่อคุณใช้aแท็กทั่วทุกที่
ด้วยเหตุนี้จึงเป็นความคิดที่ดีที่จะเพิ่มสิ่งนี้ลงในสไตล์ชีทแทน:

a {
    text-decoration: none;
}

หรือแม้แต่รหัสนี้ในไฟล์ JS:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}

— XLogic
แหล่งที่มา

Iphone / Android ไม่ใช่มาตรฐานที่ดีเนื่องจากไม่ได้เป็นตัวแทนของการแสดงผล HTML แบบย้อนหลังของ Gmail หรือ Outlook

— Stuart

@ XLogic: ขอบคุณมาก

— Monika Patel

6

ใช้ CSS เพื่อลบtext-decorations

a {
    text-decoration: none;
}

— Alan Haggai Alavi
แหล่งที่มา

6

ตัวเลือกที่ดีที่สุดสำหรับคุณถ้าคุณต้องการลบขีดเส้นใต้ออกจากลิงค์ยึดเท่านั้น -

    #content a{
                text-decoration-line:none;
                }

สิ่งนี้จะลบขีดเส้นใต้

เพิ่มเติมคุณสามารถใช้ไวยากรณ์ที่คล้ายกันสำหรับการจัดการรูปแบบอื่น ๆ โดยใช้ -

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

หวังว่านี่จะช่วยได้!

PS-นี่เป็นคำตอบแรกของฉัน!

— praveen kaushik
แหล่งที่มา

4

ในกรณีของฉันมีกฎเกี่ยวกับการโฮเวอร์โดยเอฟเฟ็กต์แบบนี้

#content a:hover{
border-bottom: 1px solid #333;
}

แน่นอนtext-decoration:none;ไม่สามารถช่วยได้ในสถานการณ์นี้ และฉันใช้เวลามากจนกว่าฉันจะค้นพบมัน

ดังนั้น: เครื่องหมายขีดล่างจะไม่สับสนกับขอบด้านล่าง

— Aleksandr Khomenko
แหล่งที่มา

4

บางครั้งมันจะถูกแทนที่โดย UI การแสดงผลบางส่วน ดีกว่าที่จะใช้:

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

— Sanjib Karmakar
แหล่งที่มา

1

นี่เป็นความคิดที่แย่มาก stackoverflow.com/questions/8360190/…

— Benjamin Gruenbaum

2

หากต้องการมอบมุมมองอื่นให้กับปัญหา (ดังสรุปจากชื่อ / เนื้อหาของโพสต์ต้นฉบับ):

หากคุณต้องการติดตามสิ่งที่สร้างขีดเส้นใต้การโกงใน HTML ของคุณให้ใช้เครื่องมือแก้ไขข้อบกพร่อง มีให้เลือกมากมาย:

สำหรับ Firefox มี FireBug;

สำหรับ Opera มี Dragonfly (เรียกว่า "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" ในเมนู Tools-> Advanced; มาพร้อมกับ Opera เป็นค่าเริ่มต้น);

สำหรับ IE มี "แถบเครื่องมือนักพัฒนา Internet Explorer" ซึ่งเป็นการดาวน์โหลดแยกต่างหากสำหรับ IE7 และด้านล่างและรวมอยู่ใน IE8 (กด F12)

ฉันไม่รู้เกี่ยวกับ Safari, Chrome และเบราว์เซอร์ส่วนน้อยอื่น ๆ แต่คุณน่าจะมีอย่างน้อยหนึ่งในสามด้านบนเครื่องของคุณ

— Vilx-
แหล่งที่มา

Safari 3/4: macobserver.com/tmo/article/Safari_3.1_The_Magical_Develop_Menu

— mplungjan

1

เมื่อคุณต้องการใช้จุดยึดแท็กเป็นเพียงลิงค์ที่ไม่มีการเพิ่มสไตล์ (เช่นขีดเส้นใต้บนโฮเวอร์หรือสีฟ้า) class="no-style"ให้เพิ่มลง ในแท็กจุดยึด จากนั้นในสไตล์ชีทระดับโลกของคุณให้สร้างคลาส "แบบไม่มีสไตล์"

.no-style { text-decoration: none !important; }

นี่มีข้อดีสองข้อ

จะไม่ส่งผลกระทบต่อแท็กสมอทั้งหมดเพียงแค่แท็กที่มีคลาส "ไม่มีสไตล์" ที่เพิ่มเข้ามา
มันจะแทนที่สไตล์อื่น ๆ ที่อาจป้องกันการตั้งค่าการตกแต่งข้อความเป็นไม่มีเลย

— เฟรดเดอริกจอห์น
แหล่งที่มา

0

อย่าลืมใส่สไตล์ชีทโดยใช้แท็กลิงก์ด้วย

http://www.w3schools.com/TAGS/tag_link.asp

หรือใส่ CSS ในแท็กสไตล์บนหน้าเว็บของคุณ

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

ฉันไม่แนะนำให้ใช้การขีดเส้นใต้ในทุกสิ่งที่นอกเหนือจากลิงก์โดยทั่วไปการขีดเส้นใต้นั้นเป็นที่ยอมรับว่าเป็นสิ่งที่สามารถคลิกได้ หากไม่สามารถคลิกได้ก็ไม่ต้องขีดเส้นใต้

สามารถเลือก CSS เบื้องต้นได้ที่ w3schools

— Jasons
แหล่งที่มา

0

<u>

เป็นแท็กที่เลิกใช้แล้ว

ใช้...

<span class="underline">My text</span>

ด้วยไฟล์ CSS ที่มี ...

span.underline
{
    text-decoration: underline;
}

หรือเพียงแค่ ...

<span style="text-decoration:underline">My Text</span>

— Oundless
แหล่งที่มา

0

ใช้คุณสมบัติ css

text-decoration:none;

หากต้องการลบขีดเส้นใต้ออกจากลิงก์

— Smita Kagwade
แหล่งที่มา

0

ขีดเส้นใต้อาจถูกลบออกโดยคุณสมบัติ CSS ที่เรียกว่าการตกแต่งข้อความ

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

หากคุณต้องการลบขีดเส้นใต้สำหรับข้อความที่มีอยู่ในองค์ประกอบอื่นที่ไม่ใช่aควรใช้ไวยากรณ์ต่อไปนี้

<style>
element-name{
text-decoration:none;
}
</style>

มีค่าตกแต่งข้อความอื่น ๆ อีกมากมายที่อาจช่วยคุณในการออกแบบลิงก์

— Sheraz
แหล่งที่มา

-1

ฉันมีปัญหากับการพิมพ์และแก้ไขเว็บนี้ ผลการตรวจสอบแล้ว

a {
    text-decoration: none !important;
}

มันได้ผล!.

— Incheol
แหล่งที่มา