翻译正在进行中。

HTML <ul> 元素(或称 HTML 无序列表元素)表示一个内可含多个元素的无序列表或项目符号列表。

内容分类 流式内容,如果 <ul> 包含至少一个 <li> 元素,那么它就是显性内容 Palpable content
允许的内容 零个或更多个 <li> 元素,可以混合使用 <ol><ul> 元素。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素

接受流文本的任何内容

Permitted ARIA roles directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM 接口 HTMLUListElement

属性

此元素仅含有全局属性

compact
此布尔属性提示列表是否需要被渲染为更紧凑的样式。用户代理决定如何解释这个属性,且并非所有浏览器都支持它。
使用说明:不要使用这个属性,因为它已经被废弃了:<ul> 元素应当使用 CSS 来更改样式。(CSS)可以提供与 compact 属性相同的效果,将  CSS 属性 line-height 的值设为 80% 即可。
type
用于设置列表的着重号样式 ,被定义在 HTML3.2 和过渡版本  HTML 4.0/4.01 中的可用值有:
  • circle
  • disc
  • square

第四种着重号样式被定义在 WebTV 接口中,但并不是所有浏览器都支持: triangle

如果未设置此 HTML 属性且没有 CSS list-style-type 属性作用于这个元素,用户代理会决定使用哪种着重号样式,一般来说这也和嵌套的层级数有关。

使用说明: 不要使用这个属性,它已经被废弃了:使用 CSS list-style-type 属性作为代替。

使用说明

  • <ul> 元素用来将没有数字顺序的一组数据进行分组,并且它们的数字顺序是没有意义的。举个例子,无序列表的列表项通常通过一个字符进行装饰,这些字符的形式可以是点,圆乃至方形.虽然这个字符没有直接在页面上定义,但是可以用与之相关的 CSS 对其进行操作,例如使用 list-style-type 属性。
  • <ol><ul> 元素中,嵌套列表没有深度和嵌套顺序的限制。
  • <ol><ul> 元素二者都代表一组数据,不过它们彼此是有区别的,ol元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素,你可以试着去改变数据的顺序。如果想表达的语义改变了,你就需要使用ol元素,否则你该使用ul元素。

实例

简单的例子

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

以上HTML输出:

  • first item
  • second item
  • third item

嵌套列表

<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>
  </li>               <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

以上HTML输出:

  • first item
  • second item
    • second item first subitem
    • second item second subitem
      • second item second subitem first sub-subitem
      • second item second subitem second sub-subitem
      • second item second subitem third sub-subitem
    • second item third subitem
  • third item

嵌套 <ul> 和 <ol>

<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>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

以上HTML输出:

  • first item
  • second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  • third item

规范

规范 状态 评论
HTML Living Standard
<ul>
Living Standard  
HTML5
<ul>
Recommendation  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ulChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
compact
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
type
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

参见

  • 其他列表相关的HTML元素: <ol>, <li>, <menu> 和绝对元素 <dir>;
  • 特别作用于 <ul>元素的CSS属性:
    •  list-style 属性, 作用于选择哪种序数的样式来显示,
    • CSS counters, 作用于操作复杂的嵌套列表,
    •  line-height 属性, 作用于模拟过时的 compact 属性,
    •  margin 属性, 作用于控制列表的缩进.

文档标签和贡献者

标签: 
最后编辑者: gafish,