picpost

Share |

ท่านใดที่นำบทความนี้ไปเผยแพร่ที่เว็บหรือบล็อกของท่านกรุณาทำลิงค์กลับมายังบทความต้นฉบับด้วยนะคะ ขอบคุณค่ะ

การทำให้ list (ul, li) มีมากกว่า 1 คอลัมน์ โดยใช้ css | Multiple Column Lists



By : Admin

Date write : 2010-09-07 11:13:30   Date update : 2010-09-07 11:33:21







ธรรมดาแล้ว แทกของ list ใน html จะมีลักษณะ แบบนี้ใช่ไหมคะ


<ul>

  <li>หัวข้อที่ 1</li>
  <li>หัวข้อที่ 2</li>
  <li>หัวข้อที่ 3</li>
  <li>หัวข้อที่ 4</li>
  <li>หัวข้อที่ 5</li>
  <li>หัวข้อที่ 6</li>
</ul>


แล้วเวลาแสดงผลออกมาผ่านหน้าเ้ว็บไซต์ จะเป็นลักษณะ list แถวเดียวแบบนี้

  • หัวข้อที่ 1
  • หัวข้อที่ 2
  • หัวข้อที่ 3
  • หัวข้อที่ 4
  • หัวข้อที่ 5
  • หัวข้อที่ 6

และถ้าหากเค้าต้องการให้แสดงออกมาเป็นสองคอลัมน์ หรือมากกว่านั้น เราสามารถใช้ Styles css มาช่วยค่ะ

โดยจะได้ list แบบหลายคอลัมน์ ดังภาพนี้



css list multiple column


2 คอลัมน์


css list multiple column


3 คอลัมน์ แบบมีไฮไลท์



css list multiple column


ul, li ให้เป็น 2 คอลัมน์ แบบมี bullet เป็นรูปภาพ



css list multiple column


ul, li ให้เป็น 3 คอลัมน์



css list multiple column


สามคอลัมน์ แบบเรียงต่อแนวตั้ง



ดูวิธีทำ และดาวน์โหลดโค๊ด css ได้ที่นี่ค่ะ
http://www.communitymx.com/content/article.cfm?page=1&cid=27F87







" ความคิดเห็นใหม่อยู่ด้านบนค่ะ "

 

คอมเมนต์ แสดงความคิดเห็น

โดย*   Guest  [ Login | สมัครสมาชิกที่นี่]
รายละเอียด*
รหัสป้องกันสแปม*   ขอรหัสใหม่


กรอกตัวอักษรตามรูปด้านบน
   
 
 



แว่นตาแฟชั่น แว่นสายตาแฟชั่น แว่นตามิกกี้เมาส์ แว่นตาแบบ อั้ม พัชราภา แว่นตาแบบ ชมพู่ อารยา แว่นตาทรงกลม แว่นตาแฟชั่น
แว่นแฟชั่น