HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์
Moderator: mindphp
-
mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41117
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
-
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย mindphp »
เขียน Css ทำ ul li เป็นเมนูแนวนอน
Css
โค้ด: เลือกทั้งหมด
<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
โค้ด: เลือกทั้งหมด
<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
- PHP Super Member
- โพสต์: 480
- ลงทะเบียนเมื่อ: 25/01/2010 11:57 pm
-
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย touleg »
กรณีใส่ข้อมูลที่มี <br /> ในแท็ก <li></li> ใช้ display:inline จะไม่ได้ผลนะครับ ให้ใช้ float:left แทน
-
pomed
- PHP Newbie
- โพสต์: 3
- ลงทะเบียนเมื่อ: 20/11/2012 3:49 pm
-
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย 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; }
ผิดตรงไหนขอโทษด้วย
เขียนเว็บไปวันๆ
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 9