码农教程 - 一技在手,衣食无忧! tools

HTML <ul> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

无序 HTML 列表：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

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

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

提示：使用 CSS 来样式列表。

提示：对于有序列表，请使用<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>
亲自试一试 »

相关页面

HTML 教程：HTML 列表

HTML DOM 参考：用户界面对象

CSS 教程：CSS 列表

默认 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;
}
亲自试一试 »


❮上一节 完整的 HTML参考 下一节❯