2008/Aug/18

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

credit:divland

Comment

Comment:

Tweet


น่าสนใจ อยกาทำเป็นอยู่พอดเลยquestion
#1 by Snowmist At 2008-08-18 13:35,