เขียน Css ทำ ul li เป็นเมนูแนวนอน

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41131
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

เขียน Css ทำ ul li เป็นเมนูแนวนอน
Css

โค้ด: เลือกทั้งหมด

<style type=”text/css”>
.toolbar li {
display:inline;
background-color:#eee;
border:1px solid;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin:0;
padding:.5em;
zoom: 1;

}

</style>
HTML

โค้ด: เลือกทั้งหมด

<ul class=”toolbar”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li>

</ul>
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
touleg
PHP Super Member
PHP Super Member
โพสต์: 480
ลงทะเบียนเมื่อ: 25/01/2010 11:57 pm
ติดต่อ:

Re: เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย touleg »

กรณีใส่ข้อมูลที่มี <br /> ในแท็ก <li></li> ใช้ display:inline จะไม่ได้ผลนะครับ ให้ใช้ float:left แทน
pomed
PHP Newbie
PHP Newbie
โพสต์: 3
ลงทะเบียนเมื่อ: 20/11/2012 3:49 pm
ติดต่อ:

Re: เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย pomed »

เริ่มด้วยการ reset ค่าของ ul, li ก่อนครับ

ul, li { float:left; display:inline; list-style-type:none; }

ประมาณนี้

เสร็จแล้วก็กำหนดค่าของ li เช่น

li { width:100px; height:40px; margin:0 1px 0 0; background-color:#eee; color:white; }

ผิดตรงไหนขอโทษด้วย
เขียนเว็บไปวันๆ
pridsr4
PHP Newbie
PHP Newbie
โพสต์: 3
ลงทะเบียนเมื่อ: 19/11/2013 2:44 pm

Re: เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย pridsr4 »

ขอบคุณครับผม
แก้ไขล่าสุดโดย pridsr4 เมื่อ 02/05/2014 4:28 pm, แก้ไขไปแล้ว 1 ครั้ง.
ghorkor
PHP Jr. Member
PHP Jr. Member
โพสต์: 19
ลงทะเบียนเมื่อ: 04/09/2013 11:10 am

Re: เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย ghorkor »

ขอบคุณค่ะ
Surat1688
PHP Jr. Member
PHP Jr. Member
โพสต์: 10
ลงทะเบียนเมื่อ: 03/05/2014 8:55 am

Re: เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย Surat1688 »

โห! เขียนแบบนี้สวยจังเลยครับ
ภาพประจำตัวสมาชิก
sarawootyou
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 18/07/2014 3:56 pm
ติดต่อ:

Re: เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย sarawootyou »

ขอบคุณมากครับ
Ggy888
PHP Newbie
PHP Newbie
โพสต์: 4
ลงทะเบียนเมื่อ: 06/12/2014 11:50 am

Re: เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย Ggy888 »

ขอบคุณมากๆครับ
ภาพประจำตัวสมาชิก
gd888
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 11/04/2015 10:22 am

Re: เขียน Css ทำ ul li เป็นเมนูแนวนอน

โพสต์ที่ยังไม่ได้อ่าน โดย gd888 »

Thank you.
:-D :-D :-D
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 38