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

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

Moderator: mindphp

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 25462
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by mindphp »

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

Code: Select all

<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

Code: Select all

<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
Posts: 480
Joined: 25/01/2010 11:57 pm
Contact:

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

Post by touleg »

กรณีใส่ข้อมูลที่มี <br /> ในแท็ก <li></li> ใช้ display:inline จะไม่ได้ผลนะครับ ให้ใช้ float:left แทน
pomed
PHP Newbie
PHP Newbie
Posts: 3
Joined: 20/11/2012 3:49 pm
Contact:

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

Post by 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
Posts: 3
Joined: 19/11/2013 2:44 pm

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

Post by pridsr4 »

ขอบคุณครับผม
Last edited by pridsr4 on 02/05/2014 4:28 pm, edited 1 time in total.
ghorkor
PHP Jr. Member
PHP Jr. Member
Posts: 19
Joined: 04/09/2013 11:10 am

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

Post by ghorkor »

ขอบคุณค่ะ
Surat1688
PHP Jr. Member
PHP Jr. Member
Posts: 10
Joined: 03/05/2014 8:55 am

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

Post by Surat1688 »

โห! เขียนแบบนี้สวยจังเลยครับ
User avatar
sarawootyou
PHP Newbie
PHP Newbie
Posts: 2
Joined: 18/07/2014 3:56 pm
Contact:

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

Post by sarawootyou »

ขอบคุณมากครับ
Ggy888
PHP Newbie
PHP Newbie
Posts: 4
Joined: 06/12/2014 11:50 am

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

Post by Ggy888 »

ขอบคุณมากๆครับ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 8 guests