تاجی 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>