CSS 列表（有序，无序，去掉无序列表的点，列表一行显示）

有序列表

有序列表是最常见的列表类型，通常用于表示有明确顺序的项目。例如，您可以使用有序列表来列出待办事项、食谱中的步骤或时间表中的日期。

要在 HTML 中创建有序列表，请使用 <ol> 标签。<li> 标签用于定义列表中的每个项目。

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

这将生成以下有序列表：

1. 项目 1
2. 项目 2
3. 项目 3

您可以使用 type 属性来更改有序列表中项目编号的样式。例如，您可以使用 type="A" 来生成大写字母列表，或使用 type="i" 来生成小写罗马数字列表。

<ol type="A">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

<ol type="i">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

这将分别生成以下有序列表：

A. 项目 1
B. 项目 2
C. 项目 3

i. 项目 1
ii. 项目 2
iii. 项目 3

无序列表

无序列表用于表示没有明确顺序的项目。例如，您可以使用无序列表来列出杂货清单、爱好列表或愿望清单。

要在 HTML 中创建无序列表，请使用 <ul> 标签。<li> 标签用于定义列表中的每个项目。

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

这将生成以下无序列表：

• 项目 1
• 项目 2
• 项目 3

您可以使用 style 属性来更改无序列表中项目的样式。例如，您可以使用 style="list-style-type: square;" 来生成方块列表，或使用 style="list-style-type: circle;" 来生成圆形列表。

<ul style="list-style-type: square;">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<ul style="list-style-type: circle;">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

这将分别生成以下无序列表：

• 项目 1

• 项目 2

• 项目 3

• 项目 1

• 项目 2

• 项目 3

去掉无序列表的点

要从无序列表中去除点，您可以使用 style="list-style-type: none;"。

<ul style="list-style-type: none;">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

这将生成以下无序列表：

项目 1
项目 2
项目 3

列表一行显示

要使列表一行显示，您可以使用 display: inline-block;。

<ul style="display: inline-block;">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

这将生成以下列表：

项目 1 项目 2 项目 3

结束语

列表是 HTML 和 CSS 中非常重要的元素。您可以使用它们来创建各种样式的列表，以满足您的不同需求。

我希望这篇文章对您有所帮助。如果您有任何问题，请随时留言。