Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > เอา A href ครอบ li แล้ว border หายทำยังไงดีครับ อยากให้กดได้ทั้งแถบ อะครับ

เอา A href ครอบ li แล้ว border หายทำยังไงดีครับ อยากให้กดได้ทั้งแถบ อะครับ

เริ่มหัวข้อใหม่

Boat Junior

โพสกระทู้ ( 1,150 )
บทความ ( 0 )

Code

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
    padding: 0.5em 0.1em 0.5em 0.1em;
    border-bottom: solid 0.1em #000000;  
}
li:last-child {
    border-bottom: none;
}

Code (PHP)

<div>
    <nav>
        <ul>
            <a href="#" title="หน้าแรก"><li>หน้าแรก</li></a>
            <li>ข้อมุลพื้นฐาน (Basic)</li>
            <li>วิธีการเล่น (Guide)</li>
            <li>ตัวละครและการ์ด (Familiar)</li>
            <li>สกิล (Skill)</li>
            <li>เทคนิคขั้นสูง (Technic)</li>
            <li>ไอเทม (Item)</li>
            <li>กิจกรรม (Event)</li>
        </ul>
    </nav>
</div>

Tag : PHP, HTML/CSS

Date : 2013-08-12 20:21:55

By : progamer2000

View : 883

Reply : 5

No. 1

Pongthep

โพสกระทู้ ( 1,096 )
บทความ ( 0 )

border-bottom: none;

Date : 2013-08-12 21:09:04

By : compiak

No. 2

Boat Junior

โพสกระทู้ ( 1,150 )
บทความ ( 0 )

อธิบายหน่อยคับ งง

Date : 2013-08-12 21:12:02

By : progamer2000

No. 3

phpinfo()

โพสกระทู้ ( 1,819 )
บทความ ( 20 )

เหตุผลคือ <li> ไม่สามารถอยู่ใน <a> ได้ครับ
<a> ต้องอยู่ใน <li> และใน <ul> ต้องมีแค่ <li> เท่านั้น

หากอยากให้คลิกได้ทั้งแถบ ต้องกำหนด <a> ให้เป็น display: block ครับ
และในกรณีนี้ควรตั้งค่า padding ที่ตัว <a> เพราะ padding นั้นเกี่ยวข้องกับพื้นที่ที่สามารถคลิกได้

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
    border-bottom: solid 0.1em #000000;  
}
li > a {
    display: block;
    padding: 0.5em 0.1em 0.5em 0.1em;
}
li:last-child {
    border-bottom: none;
}

Date : 2013-08-12 23:19:06

By : cookiephp

No. 4

phpinfo()

โพสกระทู้ ( 1,819 )
บทความ ( 20 )

HTML

<ul>
	<li><a href="#" title="หน้าแรก">หน้าแรก</a></li>
	<li>ข้อมุลพื้นฐาน (Basic)</li>
	<li>วิธีการเล่น (Guide)</li>
	<li>ตัวละครและการ์ด (Familiar)</li>
	<li>สกิล (Skill)</li>
	<li>เทคนิคขั้นสูง (Technic)</li>
	<li>ไอเทม (Item)</li>
	<li>กิจกรรม (Event)</li>
</ul>

Date : 2013-08-12 23:20:32

By : cookiephp

No. 5

Boat Junior

โพสกระทู้ ( 1,150 )
บทความ ( 0 )

ได้แล้วคับ ขอบคุณมากครับผม

Date : 2013-08-12 23:38:09

By : progamer2000

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : เอา A href ครอบ li แล้ว border หายทำยังไงดีครับ อยากให้กดได้ทั้งแถบ อะครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก