Home > เริ่มต้นกับ CSS > เรียนรู้การใช้ ul li step by step

เรียนรู้การใช้ ul li step by step

li คือ list ul คือ unorderlist จะนับ li เป็น สัญลักษณ์ อื่นๆที่ไม่ใช่ตัวเลข ol คือ orderlist นับ li เป็นตัวเลข
รูปแบบการใช้คือ

ul li ol li

แต่เราสามารถกำหนด property ให้ ul ได้ ด้วยการใส่ list-style-type เช่น ul { list-style-type: square } ก็จะได้เป็นสี่เหลี่ยมเล็กๆ

การแสดงผล

เขียนโค้ด css ดังนี้
<style type=”text/css”> ul{background:#e5e5e5} </style>

HTML ดังนี้

<ul>
<li>Home</li>
<li>Product</li>
<li>Product</li>
<li>About</li>
<li>Contact</li>
</ul>

เปิดในเบราเซอร์

test ul li

โอ้ว มันคิดไม่เหมือนกันอีกแล้ว ใน ul เดิมทีจะมีการเว้น margin padding ให้ตามปกติอยู่แล้วครับ แต่ IE นั้น ใช้ margin แต่ Fx นั้น ใช้ padding ในการเว้นด้านหน้าครับ ดูได้จากสีแบ็คกราวน์ของ ul ก็มีขอบเขตที่ต่างกัน พับผ่าสิ Browser war ยังไม่จบสิ้น จะต่อสู้กันไปถึงไหน [-o<

วิธีทำ cross browser สำหรับ ul นี้ก็คือ กำหนดให้ค่า margin หรือ padding เป็น 0 อันใดอันหนึ่ง แล้วปรับค่าในตัวที่เหลือ

ตัวอย่าง

ul{background:#e5e5e5;margin:0;padding-left:20px;}

test_ul2.gif

เย้ :)>- เหมือนกันแล้วว

คราวนี้ทำอะไรที่มากกว่านั้นอีกนิด กำหนดให้
ul{
background:#f3fdfe;
margin:0;
padding:10px;
border:#0e92a0 1px solid;
list-style-type:none;
width:150px
}

สิ่งที่เพิ่มขึ้นคือ มี border 1px กว้าง 150 px แล้วก็เอาจุดกลมๆด้านหน้าออก โดยการกำหนดให้เป็น none และ กำหนด padding โดยรอบเป็น 10px จะได้แบบนี้ เหมือนกันทั้ง IE Fx
ีul

เพิ่มการกำหนด li เป็น li{background:#ffffff;} จะได้ แบบนี้
ul2.gif

เพิ่มระยะห่าง ซักหน่อย แบบนี้ li{background:#ffffff;margin:5px} จะได้แบบนี้

li

ใส่ไอคอนด้านหน้าซักหน่อยเพื่อความสวยงาม โดยการใส่แบ็คกราวน์ให้ชิดด้านซ้ายแล้วสั่งให้มันไม่ทำซ้ำ แล้ว กำหนด padding-left ให้ดันตัว text ออกไป เขียนเพิ่มแบบนี้

li{
background:#ffffff url(images/icon_email.gif) left no-repeat;
margin:5px;
padding-left:20px;
}

จะได้แบบนี้

li2.gif

ดูๆไปแล้วเหมือน table มั้ยครับ แต่จำนวนโค้ดน้อยกว่าครับ โหลดเร็วกว่าด้วย ตัวอย่างนี้อาจยากไปสักนิดกับคนที่เพิ่งเริ่ม เพราะมีการเขียนแบบลดรูป ติดตามได้ในการเขียน css แบบ ลดรูปละกันนะครับ :)

Related Articles


Share
Categories: เริ่มต้นกับ CSS
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. likhi1
    April 24th, 2007 at 16:17 | #1

    ว่าแต่ว่าเราอยากให้มีการแสดงภาพข้างหลังตรงส่วน li เวลามีการ hover ของเมาส์
    เราจะต้องสร้าง…

    li a:link {}
    li a:hover {}
    li a:active {}
    li a:visit {}

    แล้วกำหนด URL ของภาพที่ต้องการไว้ใน
    li a:link {}, li a:hover {}, li a:active {}, li a:visit {} พวกนี้ใช่ไหมครับ…???

  2. admin
    April 24th, 2007 at 16:25 | #2

    ครับ ก็ใส่ background ไว้ใน a:hover ความจริงแล้ว ภาพที่เกิดไม่ได้เกิดที่ li นะ มันเกิดที่ a แต่ปรับให้ a กว้างยาวจนคลุม li หมดครับ :)>-

  3. May 2nd, 2007 at 18:04 | #3

    เปิดคอร์สสอนเถอะครับ อ่านแบบนี้ก็ยังงงอยู่ดีอ่ะครับ

  4. admin
    May 2nd, 2007 at 23:18 | #4

    ไม่ได้หรอกครับ เพราะในเว็บล้วนมีแต่ของฟรีครับ :d ดูอย่างกูเกิลสิ :))

  5. tye
    May 17th, 2007 at 16:30 | #5

    ผมทำเป็นเมนูสไลด์ขวาครับ มี3เลเวล แล้วเจอปัญหาใน ie6 ที่เลเวล2กับ3 ความกว้างไม่ขยายตามน่ะครับ แล้วก็ตัวฟอร์ม selection ทับเมนูอยู่ครับ ต้องทำยังไงรึครับ

  6. May 25th, 2007 at 23:14 | #6

    โอ้ เจ๋งครับ เขียนอธิบายเข้าใจง่ายดี ชอบๆ:d

  7. A
    September 3rd, 2007 at 01:53 | #7

    ถ้า อยากให้เป็นแบบนี้ เขียนยังไงหรอคะ

    - Home
    – A
    – B
    -Product
    -About
    -Contact

  8. A
    September 3rd, 2007 at 01:55 | #8

    ง่ะ!!! หมายถึง แบบนี้อ่ะคะ

    - Home
    tab- A
    tab- B
    -Product
    -About
    -Contact

  9. September 3rd, 2007 at 10:06 | #9

    <ul>
    <li>home
    <ul>

    <li> A</li>

    <li> B</li>

    </ul>

    </li>
    <li>Product</li>

    <li>About</li>

    <li>Contact</li>

    </ul>

    ซ้อนข้างในแบบนี้ครับ

  10. A
    September 4th, 2007 at 14:59 | #10

    ลองทำตามแล้วค่ะ แต่ไม่สำเร็จ
    เขียน li อย่างนี้ถูกมั้ยค่ะ

    #left li{
    text-indent: 1em;
    }
    ขอบคุณมากค่ะ :)

  11. A
    September 4th, 2007 at 18:57 | #11

    อันนี้ ul คะ
    #left ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    ขอโทษค่ะ ที่รบกวนหลายๆที:(

  12. September 6th, 2007 at 09:56 | #12

    อ่า ดูแล้วก็ไม่มีไรผิดนะครับ ถ้าได้ผลอย่างที่ต้องการ ก็คงถูกมั้งครับ ต้องดู html ด้วยอะครับ ว่าเขียนยังงัย ลองเอาโค้ดมาโพสต์ถามที่ บอร์ด ก็ได้ครับ ตรงนี้มันอาจจะคับแคบไปหน่อย :)

  13. pokultra
    May 27th, 2008 at 10:12 | #13

    ul {
    background-image:url(image/15.jpg);
    margin:0;
    padding:0 10px 0 10px;
    list-style:none;
    width: auto;}

    li {border-bottom:2px #FFFFFF dotted;
    list-style-image:url(image/11.jpg);
    list-style-position:inside;
    height:23px;
    vertical-align:bottom}

    ต้องการให้ list-style-image อยู่ตรงกลางหัวข้อต้องทำงัยครับ

  14. May 27th, 2008 at 10:52 | #14

    ทำยากครับ ถ้าใช้ list-style-image ต้องตัดรูปเผื่อมาให้พอดี หรืออีกแบบนึงง่ายกว่า คือ เอารูปนั้นใส่ Bg ที่ li แทน แล้ว สั่งชิดซ้าย ใส่ padding-left ดัน text เข้ามาไม่ให้บัง Bg จะง่ายกว่าครับ

  15. pokultra
    May 27th, 2008 at 14:30 | #15

    ขอบคุณครับ…. ^^
    ผมลอง padding-top ดัน text ลงมาอ่ะครับพอได้อยู่เหมือนกันแต่ไม่รู้จะมีปัญหาในอนาคตหรือป่าวอ่ะครับ

  16. pokultra
    May 28th, 2008 at 12:00 | #16

    แล้วถ้าต้องการตั้งชื่อ คลาสหรือไอดี ของ ul ทำงัยครับยกตัวอย่างให้ดูหน่อย หากต้องการเลือก คลาสหรือไอดีของ ul ไปใช้แล้วให้มันครอบคุมทั้ง li ด้วยอ่ะครับ….หมายถึงอย่างนี้อ่ะครับ
    ul ตัวนี้ตั้งค่าเป็นคลาสหรือไอดีไหมครับ แล้วพอจะใช้ก็กำหนดเอาแต่เขียนเงื่อนไขให้คลุมทั้ง li ด้วยครับ

  17. June 2nd, 2008 at 10:51 | #17

    ถูกต้องครับ
    ใส่ คลาสให้ ul พอจะสั่ง li
    ก็ใส่ .class li{} แบบนี้แทน ไม่ต้องใส่ คลาสที่ li ทั้งหมดครับ

  18. หัวสมองว่างสองซีก
    August 10th, 2008 at 15:49 | #18

    :(( อ่านไปทำไปมันก็ไม่ได้เรื่องเลยทำไงดีผมโง่ใครใจดีแอดเมลมาทีค๊าฟฟฟฟฟ :((

  19. November 28th, 2008 at 16:01 | #19

    Post นี้แหล่มจริงๆครับ

    ผมอ่านบทความที่นี่มาประมาณ 1 สัปดาห์ ได้ความรู้เรื่องการสร้าง Web ด้วย CSS
    ไปมากโข ต้องขอบคุณจริงๆ ที่แบ่งปันความรู้

    เรื่อง UL UI นี่ คนสร้าง web พลาดไม่ได้จริงๆครับ
    โดยเฉพาะ WordPress :)

  20. au
    December 1st, 2008 at 18:34 | #20

    ผมเพิ่งมาเป็นเด็กใหม่ที่นี้ รู้สึกว่าที่นี้ดีสุดเลยครับ:)>-

  21. suphark
    July 5th, 2009 at 21:39 | #21

    สุดยอดขั้นเทพ อ่านแล้วเห็นภาพ ทำตามแล้วเข้าใจ ขอบคุณหลายๆ

  22. เพลงฟรี
    July 15th, 2009 at 22:44 | #22

    ขอบคุณที่แชร์ความรู้ค่ะ ^_^:):):)

  23. xi
    November 20th, 2009 at 00:05 | #23

    ขอบคุณมากครับ เป็นบทเรียนที่ดีครับ มีประโยชน์มากครับ คงต้องประยุกต์หน่อยแล้วจะใช้งานได้ตามความต้องการของเรา ขอบคุณอีกครั้งครับ ^_^

  24. December 6th, 2009 at 17:54 | #24

    Thank you for good information

  25. December 6th, 2009 at 17:54 | #25

    แนวนี้ชอบมากเลยครับ

  26. เจย์
    February 15th, 2010 at 11:41 | #26

    ขอบคุณครับสำหรับเวปที่มีเนื้อหาดีๆ อย่างนี้ แถมฟรีอีกต่างหาก :d

  27. April 18th, 2010 at 14:19 | #27

    ขอบคุณเช่นเคยครับ

    ปกติก็ใช้งาน ul ol li อยู่แล้ว มาอ่านทวนอีกครั้ง วันนี้ได้ความรู้เพิ่มขึ้นจิงๆ

    ปกติผมจะใช้ list-style-image ในการสร้างลิสต์ แต่พบปัญหาคือ มันไม่ยอมอยู่ตรงกลางซะที ผมใช้ mac ในการทำเว็บ พอเปิดดูด้วย Safari ก็เห็นว่ามันอยู่ตรงกลางสวยงามดีหรอก แต่พอไปเปิดดูด้วย IE ไม่เหมือนกันซะงั้น นั่งปวดหัวอยู่นาน

    วันนี้ได้ความรู้ว่าต้องใช้ background-image มาช่วย แล้วปรับแก้ padding ให้กระเถิบมา

    ขอบคุณมากๆๆๆครับ จะติดตามต่อไปเรื่อยๆ
    วิท (http://www.tutorpoint.net)

  28. July 8th, 2010 at 00:01 | #28

    css ช่วยได้เยอะมาก ๆ เลยค่ะ แต่ก็ยากสำหรับการทำ table less ต้องหัดบ่อย ๆ

  29. February 19th, 2011 at 17:03 | #29

    ปกติแล้วผมจะใช้แต่พวก Table ในการจัดตำแหน่ง ตอนนี้ก็กำลังศึกษาเรื่อง CSS อยู่ครับ รู้สึกว่าตัวเองล้าสมัยและตกยุคอยู่มากเลยทีเดียว เทคโนโลยีเดี๋ยวนี้มันตามไม่ทันจริงๆ มาไวมากๆ

    ขอบคุณมากๆ เลยครับ :)

  1. No trackbacks yet.