HTML <ul> 标签

示例

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

定义和用法

<ul> 标签定义了一个无序（项目符号）列表。

使用 <ul> 标签和 <li> 标签来创建无序列表。

提示： 对于有序列表，请使用 <ol> 标签。

浏览器支持

Element
<ul>	Yes	Yes	Yes	Yes	Yes

全局属性

<ul> 标签支持 HTML 中的全局属性。

事件属性

<ul> 标签支持 HTML 中的事件属性。

更多示例

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

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

扩展和减少列表中的行高（使用 CSS）：

<ul style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

在列表中创建一个列表（嵌套列表）：

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

创建一个更复杂的嵌套列表：

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

默认 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;
}

GitHub 上编辑此页 2022/05/16