เรียนรู้การใช้ ul li step by step
li คือ list ul คือ unorderlist จะนับ li เป็น สัญลักษณ์ อื่นๆที่ไม่ใช่ตัวเลข ol คือ orderlist นับ 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>
เปิดในเบราเซอร์
โอ้ว มันคิดไม่เหมือนกันอีกแล้ว ใน 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;}
เย้ 
>- เหมือนกันแล้วว
คราวนี้ทำอะไรที่มากกว่านั้นอีกนิด กำหนดให้
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
เพิ่มการกำหนด li เป็น li{background:#ffffff;} จะได้ แบบนี้
เพิ่มระยะห่าง ซักหน่อย แบบนี้ li{background:#ffffff;margin:5px} จะได้แบบนี้
ใส่ไอคอนด้านหน้าซักหน่อยเพื่อความสวยงาม โดยการใส่แบ็คกราวน์ให้ชิดด้านซ้ายแล้วสั่งให้มันไม่ทำซ้ำ แล้ว กำหนด padding-left ให้ดันตัว text ออกไป เขียนเพิ่มแบบนี้
li{
background:#ffffff url(images/icon_email.gif) left no-repeat;
margin:5px;
padding-left:20px;
}
จะได้แบบนี้
ดูๆไปแล้วเหมือน table มั้ยครับ แต่จำนวนโค้ดน้อยกว่าครับ โหลดเร็วกว่าด้วย ตัวอย่างนี้อาจยากไปสักนิดกับคนที่เพิ่งเริ่ม เพราะมีการเขียนแบบลดรูป ติดตามได้ในการเขียน css แบบ ลดรูปละกันนะครับ
likhi1 said,
April 24, 2007 @ 4:17 pm
ว่าแต่ว่าเราอยากให้มีการแสดงภาพข้างหลังตรงส่วน 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 {} พวกนี้ใช่ไหมครับ…???
admin said,
April 24, 2007 @ 4:25 pm
ครับ ก็ใส่ background ไว้ใน a:hover ความจริงแล้ว ภาพที่เกิดไม่ได้เกิดที่ li นะ มันเกิดที่ a แต่ปรับให้ a กว้างยาวจนคลุม li หมดครับ
เจ้าชายน้อย said,
May 2, 2007 @ 6:04 pm
เปิดคอร์สสอนเถอะครับ อ่านแบบนี้ก็ยังงงอยู่ดีอ่ะครับ
admin said,
May 2, 2007 @ 11:18 pm
ไม่ได้หรอกครับ เพราะในเว็บล้วนมีแต่ของฟรีครับ
ดูอย่างกูเกิลสิ 
tye said,
May 17, 2007 @ 4:30 pm
ผมทำเป็นเมนูสไลด์ขวาครับ มี3เลเวล แล้วเจอปัญหาใน ie6 ที่เลเวล2กับ3 ความกว้างไม่ขยายตามน่ะครับ แล้วก็ตัวฟอร์ม selection ทับเมนูอยู่ครับ ต้องทำยังไงรึครับ
Pat said,
May 25, 2007 @ 11:14 pm
โอ้ เจ๋งครับ เขียนอธิบายเข้าใจง่ายดี ชอบๆ
A said,
September 3, 2007 @ 1:53 am
ถ้า อยากให้เป็นแบบนี้ เขียนยังไงหรอคะ
- Home
- A
- B
-Product
-About
-Contact
A said,
September 3, 2007 @ 1:55 am
ง่ะ!!! หมายถึง แบบนี้อ่ะคะ
- Home
tab- A
tab- B
-Product
-About
-Contact
utt said,
September 3, 2007 @ 10:06 am
<ul>
<li>home
<ul>
<li> A</li>
<li> B</li>
</ul>
</li>
<li>Product</li>
<li>About</li>
<li>Contact</li>
</ul>
ซ้อนข้างในแบบนี้ครับ
A said,
September 4, 2007 @ 2:59 pm
ลองทำตามแล้วค่ะ แต่ไม่สำเร็จ
เขียน li อย่างนี้ถูกมั้ยค่ะ
#left li{
text-indent: 1em;
}
ขอบคุณมากค่ะ
A said,
September 4, 2007 @ 6:57 pm
อันนี้ ul คะ
#left ul{
list-style-type: none;
margin: 0;
padding: 0;
}
ขอโทษค่ะ ที่รบกวนหลายๆที
utt said,
September 6, 2007 @ 9:56 am
อ่า ดูแล้วก็ไม่มีไรผิดนะครับ ถ้าได้ผลอย่างที่ต้องการ ก็คงถูกมั้งครับ ต้องดู html ด้วยอะครับ ว่าเขียนยังงัย ลองเอาโค้ดมาโพสต์ถามที่ บอร์ด ก็ได้ครับ ตรงนี้มันอาจจะคับแคบไปหน่อย
pokultra said,
May 27, 2008 @ 10:12 am
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 อยู่ตรงกลางหัวข้อต้องทำงัยครับ
divland's people said,
May 27, 2008 @ 10:52 am
ทำยากครับ ถ้าใช้ list-style-image ต้องตัดรูปเผื่อมาให้พอดี หรืออีกแบบนึงง่ายกว่า คือ เอารูปนั้นใส่ Bg ที่ li แทน แล้ว สั่งชิดซ้าย ใส่ padding-left ดัน text เข้ามาไม่ให้บัง Bg จะง่ายกว่าครับ
pokultra said,
May 27, 2008 @ 2:30 pm
ขอบคุณครับ…. ^^
ผมลอง padding-top ดัน text ลงมาอ่ะครับพอได้อยู่เหมือนกันแต่ไม่รู้จะมีปัญหาในอนาคตหรือป่าวอ่ะครับ
pokultra said,
May 28, 2008 @ 12:00 pm
แล้วถ้าต้องการตั้งชื่อ คลาสหรือไอดี ของ ul ทำงัยครับยกตัวอย่างให้ดูหน่อย หากต้องการเลือก คลาสหรือไอดีของ ul ไปใช้แล้วให้มันครอบคุมทั้ง li ด้วยอ่ะครับ….หมายถึงอย่างนี้อ่ะครับ
ul ตัวนี้ตั้งค่าเป็นคลาสหรือไอดีไหมครับ แล้วพอจะใช้ก็กำหนดเอาแต่เขียนเงื่อนไขให้คลุมทั้ง li ด้วยครับ
divland's people said,
June 2, 2008 @ 10:51 am
ถูกต้องครับ
ใส่ คลาสให้ ul พอจะสั่ง li
ก็ใส่ .class li{} แบบนี้แทน ไม่ต้องใส่ คลาสที่ li ทั้งหมดครับ
หัวสมองว่างสองซีก said,
August 10, 2008 @ 3:49 pm