จะลบขีดเส้นใต้ออกจากลิงค์ใน HTML ได้อย่างไร?

130

ในหน้าของฉันฉันได้ใส่ลิงค์บางส่วนที่ฉันไม่ต้องการบรรทัดใด ๆ ดังนั้นฉันจะลบลิงก์นั้นโดยใช้ HTML ได้อย่างไร

html

4

Paic, ฉันจะไม่ไปรบกวนกลิ้งกลับมาแท็กอีกครั้ง แต่เพียงเพื่อให้คุณรู้ว่าวิธีเดียวที่จะลบขีดเส้นใต้คือด้วย CSS ใช่แม้ว่าคุณจะเพิ่มสอดคล้องกับ HTML (ในstyleแอตทริบิวต์) ก็ยังคงเป็น CSS อีกสองแท็กก็ใช้ได้อย่างสมบูรณ์ ( presentationและhyperlink) ในอนาคตโปรดอย่าลบ (หรือเพิ่ม) แท็กให้กับคำถามเว้นแต่จะมีเหตุผลที่ถูกต้องในการทำเช่นนั้น ขอบคุณ!

— 0b10011

@bfrohs ฉันเคารพคำพูดของคุณ แต่ฉันกำลังสร้างไซต์ของฉันโดยใช้ HTML เท่านั้นดังนั้นฉันจึงไม่ได้เพิ่มแท็กเพราะถ้าฉันจะทำเช่นนั้นฉันอาจได้รับคำตอบสำหรับภาษาอื่น ที่จริงฉันเป็นมือใหม่นิดหน่อยนั่นคือเหตุผล

— Paic Ten

3

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

— 0b10011

1

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

— RAS

2

ทำไมคำถามนี้ถึงมีคนโหวตเยอะ? คุณสามารถตอบได้อย่างแท้จริงในการค้นหาของ Google เพียงครั้งเดียวและฉันแน่ใจว่ามีรายการซ้ำจำนวนมากใน StackOverflow

— Alternatex

192

เวอร์ชันอินไลน์ :

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

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

ดูคำตอบของจอห์นจะเห็นคำตอบเทียบเท่าโดยใช้CSS

— patryk.beza
แหล่งที่มา

1

ฆาตกร! ฉันไม่เคยเห็นเส้นขีดล่างเหล่านี้เลยตลอดหลายปีที่ฉันทำ html .... ^^

— Alex Cio

1

คำตอบของ John ยังคงใช้รูปแบบอินไลน์เป็นหลัก การแยก CSS ของคุณมีความหมายมากกว่าการใช้นามแฝง css ใน html ของคุณ เช่นการใช้class="big-and-red"นามแฝงไม่ใช่การแยก class="meaningful-domain-item"แล้ว css .meaningful-domain-item { //big and red }คือ คำตอบนี้เพียงพอที่จะเตือนฉันว่าควรใช้แท็กใดใน css +1 ของฉัน

— Nathan Cooper

รหัสดังกล่าวข้างต้นไม่ได้ผลสำหรับฉัน เมื่อฉันเจาะลึกปัญหาฉันรู้ว่ามันไม่ทำงานเพราะฉันวางสไตล์ไว้หลัง href เมื่อฉันวางสไตล์ไว้ก่อน href มันก็ทำงานตามที่คาดไว้ <a href=" yoursite.com "style="text-decoration:none"> ไซต์ของคุณ </a>

— Ganesh MS

55

การดำเนินการนี้จะลบขีดเส้นใต้ทั้งหมดออกจากลิงก์ทั้งหมด:

a {text-decoration: none; }

หากคุณมีลิงก์เฉพาะที่ต้องการใช้กับสิ่งนี้ให้ตั้งชื่อคลาสเช่นnounderlineและทำสิ่งนี้:

a.nounderline {text-decoration: none; }

ซึ่งจะใช้กับลิงก์เหล่านั้นเท่านั้นและปล่อยให้คนอื่น ๆ ทั้งหมดไม่ได้รับผลกระทบ

รหัสนี้อยู่ใน<head>เอกสารของคุณหรือในสไตล์ชีต:

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

และในร่างกาย:

<a href="#" class="nounderline">Link</a>

— จอห์นคอนเด
แหล่งที่มา

15

ฉันแนะนำให้ใช้: วางเมาส์เพื่อหลีกเลี่ยงการขีดเส้นใต้หากตัวชี้เมาส์อยู่เหนือจุดยึด

a:hover {
   text-decoration:none;
}

— โรมัน
แหล่งที่มา

6

เพิ่มสิ่งนี้ในสไตล์ชีตภายนอกของคุณ ( แนะนำ ):
```
a {text-decoration:none;}
```
หรือเพิ่มสิ่งนี้ลงใน<head>เอกสาร HTML ของคุณ:
```
<style type="text/css">
 a {text-decoration:none;}
</style>
```

หรือเพิ่มลงในaองค์ประกอบ ( ไม่แนะนำ ):

<!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>

— 0b10011
แหล่งที่มา

4

คำตอบอื่น ๆ ทั้งหมดกล่าวถึงการตกแต่งข้อความ บางครั้งคุณใช้ธีม Wordpress หรือ CSS ของคนอื่นที่ลิงก์ถูกขีดเส้นใต้ด้วยวิธีการอื่นดังนั้นการตกแต่งข้อความ: ไม่มีจะไม่ปิดการขีดเส้นใต้

เส้นขอบและกล่องเงาเป็นอีกสองวิธีที่ฉันทราบสำหรับการขีดเส้นใต้ลิงก์ ในการปิดสิ่งเหล่านี้:

border: none;

และ

box-shadow: none;

— โจโกลตัน
แหล่งที่มา

2

ต่อไปนี้ไม่ใช่แนวทางปฏิบัติที่ดีที่สุด แต่บางครั้งก็สามารถพิสูจน์ได้ว่ามีประโยชน์

ควรใช้โซลูชันที่ John Conde จัดเตรียมไว้ให้ แต่บางครั้งการใช้ CSS ภายนอกก็เป็นไปไม่ได้ คุณจึงสามารถเพิ่มสิ่งต่อไปนี้ลงในแท็ก HTML ของคุณ:

<a style="text-decoration:none;">My Link</a>

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

1

<style="text-decoration: none">

โค้ดด้านบนก็เพียงพอแล้วเพียงแค่วางสิ่งนี้ลงในลิงค์ที่คุณต้องการลบขีดเส้นใต้

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

1

รหัสที่กล่าวถึงข้างต้นไม่ได้ผลสำหรับฉัน เมื่อฉันเจาะลึกปัญหาฉันรู้ว่ามันใช้ไม่ได้เพราะฉันวางสไตล์ไว้หลัง href เมื่อฉันวางสไตล์ไว้ก่อน href มันก็ทำงานตามที่คาดไว้

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>

— พระพิฆเนศม
แหล่งที่มา