การใช้ ul li ol ใน css

หน้าแรก CSS การใช้ ul li ol ใน css

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

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

การแสดงผล
เขียนโค้ด css ดังนี้

Code:

HTML ดังนี้

Code:

<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 อันใดอันหนึ่ง แล้วปรับค่าในตัวที่เหลือ

ตัวอย่าง

Code:

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

เหมือนกันแล้ว

คราวนี้ทำอะไรที่มากกว่านั้นอีกนิด กำหนดให้

Code:

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 เป็น

Code:

li{background:#ffffff;}

จะได้ แบบนี้

เพิ่มระยะห่าง ซักหน่อย แบบนี้

Code:

li{background:#ffffff;margin:5px}

จะได้แบบนี้

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

Code:

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

จะได้แบบนี้

ดูๆไปแล้วเหมือน table มั้ยครับ แต่จำนวนโค้ดน้อยกว่าครับ โหลดเร็วกว่าด้วย ตัวอย่างนี้อาจยากไปสักนิดกับคนที่เพิ่งเริ่ม เพราะมีการเขียนแบบลดรูป
----------------------
ขอบคุณบทความดีๆจาก divland.com

ขึ้นไปด้านบน