HTML แบบแฟ้ม <li>

  • หน้าก่อนหน้า <legend>
  • หน้าต่อไป <link>

定义和用法

<li> 标签定义列表项。

<li> 标签用于有序列表 (<ol>)、无序列表 (<ul>) 和菜单列表 (<menu>) 中。

在 <ul> 和 <menu> 中，列表项通常会用项目符号显示。

在 <ol> 中，列表项通常会以数字或字母显示。

提示：请使用 CSS 来设置列表样式.

另请参阅：

HTML 教程：HTML รายการ

HTML DOM 参考手册：Li 对象

CSS 教程：设置列表的样式

实例

例子 1

一个有序 (<ol>) 和一个无序 (<ul>) 的 HTML 列表：

<ol>
  <li>กาแฟ</li>
  <li>茶</li>
  <li>นม</li>
</ol>
<ul>
  <li>กาแฟ</li>
  <li>茶</li>
  <li>นม</li>
</ul>

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

例子 2

在有序列表中使用 value 属性：

<ol>
  <li value="100">咖啡</li>
  <li>茶</li>
  <li>นม</li>
  <li>纯水</li>
  <li>果汁</li>
  <li>啤酒</li>
</ol>

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

例子 3

设置不同的列表样式类型（使用 CSS）：

<ol>
  <li>กาแฟ</li>
  <li style="list-style-type:lower-alpha">茶</li>
  <li>นม</li>
</ol>
<ul>
  <li>กาแฟ</li>
  <li style="list-style-type:square">茶</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>เขียวชา
        <ul>
          <li>เขียวทอง</li>
          <li>ทุ่งทอง</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>นม</li>
</ul>

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

ตัวแทน

ตัวแทน ค่า คำอธิบาย
value ตัวเลข มีผลบน <ol> รายการเท่านั้น กำหนดค่าเริ่มต้นของรายการ รายการต่อไปจะเพิ่มขึ้นตามตัวเลขนี้

ตัวแทนที่มีการกำหนดทั่วไป

<li> แบบภาพยังสนับสนุน ตัวแทนที่มีการกำหนดทั่วไปใน HTML.

ตัวแทนที่มีการกำหนดเหตุการณ์

<li> แบบภาพยังสนับสนุน ตัวแทนที่มีการกำหนดเหตุการณ์ใน HTML.

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

โปรแกรมบราวเซอร์ส่วนใหญ่จะใช้ค่าเริ่มต้นดังนี้เพื่อแสดง <li> องค์ประกอบ:

li {
  display: list-item;
}

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

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