เรียนรู้การใช้ 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,
เมษายน 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,
เมษายน 24, 2007 @ 4:25 pm
ครับ ก็ใส่ background ไว้ใน a:hover ความจริงแล้ว ภาพที่เกิดไม่ได้เกิดที่ li นะ มันเกิดที่ a แต่ปรับให้ a กว้างยาวจนคลุม li หมดครับ
เจ้าชายน้อย said,
พฤษภาคม 2, 2007 @ 6:04 pm
เปิดคอร์สสอนเถอะครับ อ่านแบบนี้ก็ยังงงอยู่ดีอ่ะครับ
admin said,
พฤษภาคม 2, 2007 @ 11:18 pm
ไม่ได้หรอกครับ เพราะในเว็บล้วนมีแต่ของฟรีครับ
ดูอย่างกูเกิลสิ 
tye said,
พฤษภาคม 17, 2007 @ 4:30 pm
ผมทำเป็นเมนูสไลด์ขวาครับ มี3เลเวล แล้วเจอปัญหาใน ie6 ที่เลเวล2กับ3 ความกว้างไม่ขยายตามน่ะครับ แล้วก็ตัวฟอร์ม selection ทับเมนูอยู่ครับ ต้องทำยังไงรึครับ
Pat said,
พฤษภาคม 25, 2007 @ 11:14 pm
โอ้ เจ๋งครับ เขียนอธิบายเข้าใจง่ายดี ชอบๆ
A said,
กันยายน 3, 2007 @ 1:53 am
ถ้า อยากให้เป็นแบบนี้ เขียนยังไงหรอคะ
- Home
- A
- B
-Product
-About
-Contact
A said,
กันยายน 3, 2007 @ 1:55 am
ง่ะ!!! หมายถึง แบบนี้อ่ะคะ
- Home
tab- A
tab- B
-Product
-About
-Contact
utt said,
กันยายน 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,
กันยายน 4, 2007 @ 2:59 pm
ลองทำตามแล้วค่ะ แต่ไม่สำเร็จ
เขียน li อย่างนี้ถูกมั้ยค่ะ
#left li{
text-indent: 1em;
}
ขอบคุณมากค่ะ
A said,
กันยายน 4, 2007 @ 6:57 pm
อันนี้ ul คะ
#left ul{
list-style-type: none;
margin: 0;
padding: 0;
}
ขอโทษค่ะ ที่รบกวนหลายๆที
utt said,
กันยายน 6, 2007 @ 9:56 am
อ่า ดูแล้วก็ไม่มีไรผิดนะครับ ถ้าได้ผลอย่างที่ต้องการ ก็คงถูกมั้งครับ ต้องดู html ด้วยอะครับ ว่าเขียนยังงัย ลองเอาโค้ดมาโพสต์ถามที่ บอร์ด ก็ได้ครับ ตรงนี้มันอาจจะคับแคบไปหน่อย
pokultra said,
พฤษภาคม 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,
พฤษภาคม 27, 2008 @ 10:52 am
ทำยากครับ ถ้าใช้ list-style-image ต้องตัดรูปเผื่อมาให้พอดี หรืออีกแบบนึงง่ายกว่า คือ เอารูปนั้นใส่ Bg ที่ li แทน แล้ว สั่งชิดซ้าย ใส่ padding-left ดัน text เข้ามาไม่ให้บัง Bg จะง่ายกว่าครับ
pokultra said,
พฤษภาคม 27, 2008 @ 2:30 pm
ขอบคุณครับ…. ^^
ผมลอง padding-top ดัน text ลงมาอ่ะครับพอได้อยู่เหมือนกันแต่ไม่รู้จะมีปัญหาในอนาคตหรือป่าวอ่ะครับ
pokultra said,
พฤษภาคม 28, 2008 @ 12:00 pm
แล้วถ้าต้องการตั้งชื่อ คลาสหรือไอดี ของ ul ทำงัยครับยกตัวอย่างให้ดูหน่อย หากต้องการเลือก คลาสหรือไอดีของ ul ไปใช้แล้วให้มันครอบคุมทั้ง li ด้วยอ่ะครับ….หมายถึงอย่างนี้อ่ะครับ
ul ตัวนี้ตั้งค่าเป็นคลาสหรือไอดีไหมครับ แล้วพอจะใช้ก็กำหนดเอาแต่เขียนเงื่อนไขให้คลุมทั้ง li ด้วยครับ
divland's people said,
มิถุนายน 2, 2008 @ 10:51 am
ถูกต้องครับ
ใส่ คลาสให้ ul พอจะสั่ง li
ก็ใส่ .class li{} แบบนี้แทน ไม่ต้องใส่ คลาสที่ li ทั้งหมดครับ
หัวสมองว่างสองซีก said,
สิงหาคม 10, 2008 @ 3:49 pm
NatZ said,
พฤศจิกายน 28, 2008 @ 4:01 pm
Post นี้แหล่มจริงๆครับ
ผมอ่านบทความที่นี่มาประมาณ 1 สัปดาห์ ได้ความรู้เรื่องการสร้าง Web ด้วย CSS
ไปมากโข ต้องขอบคุณจริงๆ ที่แบ่งปันความรู้
เรื่อง UL UI นี่ คนสร้าง web พลาดไม่ได้จริงๆครับ
โดยเฉพาะ Wordpress
au said,
ธันวาคม 1, 2008 @ 6:34 pm
ผมเพิ่งมาเป็นเด็กใหม่ที่นี้ รู้สึกว่าที่นี้ดีสุดเลยครับ