HTML <ul> 标籤

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

Definition at Usage

<ul> tag upang tanggapin ang walang kaugnay na (may balakang) listahan.

Gamit ang <ul> tag at <li> tag upang lumikha ng walang kaugnay na listahan.

Tip:Gamit ang CSS upangIset ang estilo ng listahan。

Tip:Para sa may oras na listahan, gamit: <ol> Tag。

Para sa iba pang babasahin:

HTML Tutorial:HTML รายการ

HTML DOM Reference Manual:Ul Object

CSS Tutorial:Iset ang estilo ng listahan

Sample

Halimbawa 1

Isang anumang uri ng HTML listahan:

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

ทดสอบเอง

Halimbawa 2

Iset ang iba't ibang uri ng estilo ng listahan (gamit ang CSS):

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

ทดสอบเอง

Halimbawa 3

Magpalawak at magsiyasahin ang haba ng linya sa listahan (gamit ang CSS):

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

ทดสอบเอง

Halimbawa 4

Maglagay ng isa pang listahan sa listahan (nakakalalim na listahan):

<ul>
  <li>กาแฟ</li>
  <li>ชา</li>
    <ul>
      <li>พูเตร์</li>
      <li>Green Tea</li>
    </ul>
  </li>
  <li>นม</li>
</ul>

ทดสอบเอง

Halimbawa 5

Makapaglilikha ng mas kompleksong napakalalim na listahan:

<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>