เขียน Css ทำ ul li เป็นเมนูแนวนอน

[mindphp]

เขียน Css ทำ ul li เป็นเมนูแนวนอน
Css

Code: Select all

<style type=”text/css”>
.toolbar li {
display:inline;
background-color:#eee;
border:1px solid;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin:0;
padding:.5em;
zoom: 1;

}

</style>

HTML

Code: Select all

<ul class=”toolbar”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li>

</ul>

[touleg]

กรณีใส่ข้อมูลที่มี <br /> ในแท็ก <li></li> ใช้ display:inline จะไม่ได้ผลนะครับ ให้ใช้ float:left แทน

[pomed]

เริ่มด้วยการ reset ค่าของ ul, li ก่อนครับ

ul, li { float:left; display:inline; list-style-type:none; }

ประมาณนี้

เสร็จแล้วก็กำหนดค่าของ li เช่น

li { width:100px; height:40px; margin:0 1px 0 0; background-color:#eee; color:white; }

ผิดตรงไหนขอโทษด้วย

[pridsr4]

ขอบคุณครับผม

[ghorkor]

ขอบคุณค่ะ

[Surat1688]

โห! เขียนแบบนี้สวยจังเลยครับ

[sarawootyou]

ขอบคุณมากครับ

[Ggy888]

ขอบคุณมากๆครับ