<ul>: 无序列表元素

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<ul> HTML 元素表示一个无序列表项,通常渲染为项目符号列表。

试一试

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>
li {
  list-style-type: circle;
}

li li {
  list-style-type: square;
}

属性

此元素包含全局属性

compact 已弃用

这个布尔属性暗示列表应以紧凑的样式呈现。对此属性的解释取决于浏览器。请改用 CSS:要实现与 compact 属性类似的效果,可以使用 CSS 属性 line-height 并将其值设置为 80%

type 已弃用

此属性设置列表的项目符号样式。HTML3.2 和 HTML 4.0/4.01 的过渡版本中定义的取值有:

  • circle
  • disc
  • square

WebTV 界面中定义了第四种项目符号类型,但并非所有浏览器都支持:triangle

如果未 present 且没有 CSS list-style-type 属性应用于该元素,则用户代理将根据列表的嵌套级别选择项目符号类型。

警告:请勿使用此属性,因为它已被弃用;请改用 CSS list-style-type 属性。

用法说明

  • <ul> 元素用于对一组没有数字顺序且列表中顺序无意义的项目进行分组。通常,无序列表项显示为项目符号,可以是几种形式,例如点、圆圈或方块。项目符号样式不在页面的 HTML 描述中定义,而是在其关联的 CSS 中使用 list-style-type 属性定义。
  • <ul><ol> 元素可以任意深度嵌套。此外,嵌套列表可以在 <ol><ul> 之间无限制地交替。
  • <ol><ul> 元素都表示一个列表项。它们的区别在于,对于 <ol> 元素,顺序是有意义的。要确定使用哪一个,请尝试更改列表项的顺序;如果含义发生变化,则应使用 <ol> 元素,否则可以使用 <ul>

示例

基本示例

html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

结果

嵌套列表

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

结果

有序列表嵌套在无序列表中

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

结果

技术摘要

内容类别 流内容,如果 <ul> 元素的子元素至少包含一个 <li> 元素,则为可触及内容
允许内容 零个或多个 <li><script><template> 元素。
标签省略 无,起始标签和结束标签都必须存在。
允许父级 任何接受流内容的元素。
隐式 ARIA 角色 list
允许的 ARIA 角色 directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM 接口 HTMLUListElement

规范

规范
HTML
# the-ul-element

浏览器兼容性

另见

  • 其他列表相关 HTML 元素:<ol><li><menu>
  • 可能对样式设置 <ul> 元素特别有用的 CSS 属性
    • list-style 属性,用于选择序数显示的方式。
    • CSS 计数器,用于处理复杂的嵌套列表。
    • line-height 属性,用于模拟已弃用的 compact 属性。
    • margin 属性,用于控制列表缩进。