HTML <ul> แทร็ก

  • หน้าก่อนหน้า <u>
  • หน้าต่อไป <var>

การใช้งานและการประกาศ

<ul> แท็กเพื่อตั้งรายการเลือกที่ไม่มีลำดับ (มีลูกศอก).

ใช้ <ul> แท็กและ <li> แท็กเพื่อสร้างรายการเลือกที่ไม่มีลำดับ (มีลูกศอก).

คำเตือน:ใช้ CSS โดยตั้งรูปแบบรายการ。

คำเตือน:สำหรับรายการที่มีลำดับ ใช้ <ol> แท็ก。

ดูเพิ่มเติม:

สอน HTML:HTML รายการ

คู่มือ HTML DOM:แคล่ว Ul

สอน CSS:ตั้งรูปแบบรายการ

ตัวอย่าง

ตัวอย่าง 1

รายการ HTML ที่ไม่มีลำดับ:

<ul>
  <li>กาแฟ</li>
  <li>ชา</li>
  <li>นม</li>
</ul>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งรูปแบบรายการแบบต่าง ๆ (ใช้ CSS):

<ul style="list-style-type:circle">
  <li>กาแฟ</li>
  <li>ชา</li>
  <li>นม</li>
</ul>
<ul style="list-style-type:disc">
  <li>กาแฟ</li>
  <li>ชา</li>
  <li>นม</li>
</ul>
<ul style="list-style-type:square">
  <li>กาแฟ</li>
  <li>ชา</li>
  <li>นม</li>
</ul>

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ขยายและลดระยะห่างของบรรยายในรายการ (ใช้ CSS):

<ul style="line-height:180%">
  <li>กาแฟ</li>
  <li>ชา</li>
  <li>นม</li>
</ul>
<ul style="line-height:80%">
  <li>กาแฟ</li>
  <li>ชา</li>
  <li>นม</li>
</ul>

ทดลองด้วยตัวเอง

ตัวอย่าง 4

สร้างรายการเลือกอีกหนึ่งรายการในรายการ (รายการฝั่งใน):

<ul>
  <li>กาแฟ</li>
  <li>ชา</li>
    <ul>
      <li>ชาพูเอร์</li>
      <li>ชาเขียว</li>
    </ul>
  </li>
  <li>นม</li>
</ul>

ทดลองด้วยตัวเอง

ตัวอย่าง 5

สร้างรายการเลือกที่มีความซับซ้อนขึ้น:

<ul>
  <li>กาแฟ</li>
  <li>ชา</li>
    <ul>
      <li>ชาพูเอร์</li>
      <li>ชาเขียว</li>
        <ul>
          <li>ทุ่งเขียว</li>
          <li>ทุ่งยาง</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>นม</li>
</ul>

ทดลองด้วยตัวเอง

มาตราบัญญัติเหตุทั่วไป

<ul> แทร็กยังสนับสนุน มาตราบัญญัติเหตุทั่วไปใน HTML。

มาตราบัญญัติเหตุ

<ul> แทร็กยังสนับสนุน มาตราบัญญัติเหตุใน HTML。

การตั้งค่า CSS โดยเริ่มต้น

โปรแกรมบราวเซอร์ส่วนใหญ่จะแสดงค่าเริ่มต้นตามต่อไปนี้ <ul> องค์ประกอบ：

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

ทดลองด้วยตัวเอง

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <u>
  • หน้าต่อไป <var>