HTML如何设置无序列表样式？ul的type属性怎么用？-html教程-PHP中文网

HTML如何设置无序列表样式？ul的type属性怎么用？

月夜之吻

发布： 2025-08-15 20:57:01

原创

782人浏览过

现代网页开发中不推荐使用ul的type属性，因为它在html5中已被废弃，违反了结构与样式分离的原则，维护困难且功能有限；应使用css的list-style-type、list-style-position和list-style-image等属性进行更灵活的样式控制；深度定制列表时可通过margin、padding、color、line-height等属性调整布局与外观；而创建完全自定义的列表标记则需结合list-style: none、position: relative与::before或::after伪元素，利用content插入自定义内容并精确定位，从而实现远超type属性的视觉效果和灵活性，这种方法支持图标、符号、动画等复杂设计，是现代前端开发的标准实践。

HTML如何设置无序列表样式？ul的type属性怎么用？

无序列表的样式设置，现代网页开发里主要靠CSS来完成。至于

ul

登录后复制

的

type

登录后复制

属性，它在HTML5里已经被废弃了，现在几乎不用，更多是历史遗留问题，因为它提供的控制能力非常有限。

解决方案

要给HTML的无序列表（

<ul>

登录后复制

）设置样式，最核心、最灵活的方式就是使用CSS。你几乎可以改变列表项标记（list-item marker）的任何方面，或者干脆用自定义内容替换它。

基本的样式控制会用到

list-style-type

登录后复制

这个CSS属性，它可以让你选择几种预设的标记类型：

立即学习“前端免费学习笔记（深入）”；

```
disc
```
登录后复制
(实心圆，默认值)
```
circle
```
登录后复制
(空心圆)
```
square
```
登录后复制
(实心方块)
```
none
```
登录后复制
(不显示任何标记)

比如，如果你想让列表显示空心圆：

<style>
  ul {
    list-style-type: circle;
  }
</style>

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

登录后复制

当然，这只是冰山一角。除了标记类型，你还可以控制标记的位置（

list-style-position: inside | outside

登录后复制

），或者用图片作为标记（

list-style-image: url('your-image.png')

登录后复制

）。我个人在项目里，很少直接用

list-style-image

登录后复制

，因为它对图片大小和定位的控制不够精细，更多时候会选择更高级的伪元素方法来完全自定义。

为什么现代网页设计中不推荐使用

ul

登录后复制

的

type

登录后复制

属性？

ul

登录后复制

标签确实有个

type

登录后复制

属性，比如你可以写

<ul type="square">

登录后复制

。它也能实现改变标记形状的效果，和CSS的

list-style-type

登录后复制

有点像。但我得说，这东西现在基本上是“古董”了，在HTML5规范里已经被明确标记为废弃（deprecated）。

不推荐用它的原因其实挺多的，核心在于“关注点分离”的原则。HTML的职责是定义网页的结构和内容，而CSS的职责是负责样式和表现。把样式信息写在HTML标签的属性里，就混淆了这两者的界限。这不仅让代码变得难以维护——想象一下，如果你有几十个列表，想统一改个样式，用CSS只需要改一个地方，而用

type

登录后复制

属性你得改几十个HTML标签——还会限制你的样式发挥空间。

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

查看详情

举个例子，

type

登录后复制

属性只能让你选那几种固定的标记，比如圆点、方块、空心圆。但如果你想用一个自定义的SVG图标，或者想把列表标记放在列表项内容的内部，

type

登录后复制

属性就完全无能为力了。CSS则能轻松实现这些。所以，我看到项目里还有人在用

type

登录后复制

属性，第一反应就是这代码可能有点年头了，或者开发者对现代Web标准不太熟悉。

除了

list-style-type

登录后复制

，还有哪些CSS属性可以深度定制无序列表？

仅仅知道

list-style-type

登录后复制

肯定不够，在实际开发中，我们对列表的样式需求远不止于此。除了前面提到的

list-style-type

登录后复制

、

list-style-position

登录后复制

和

list-style-image

登录后复制

（这三个其实可以合并成一个简写属性

list-style

登录后复制

），我们还可以用很多其他CSS属性来深度定制无序列表。

比如说，列表项之间的间距、列表整体的缩进、字体大小和颜色等等。这些都是通过作用在

<ul>

登录后复制

或

<li>

登录后复制

元素上的常规CSS属性来实现的：

margin
登录后复制
和
padding
登录后复制
：这是最常用的，用来控制列表整体和列表项的内外边距，调整它们在页面上的位置和间距。默认情况下，浏览器会给
```
<ul>
```
登录后复制
一个左侧的
```
padding
```
登录后复制
，以及一些
```
margin
```
登录后复制
。我经常会先用
```
margin: 0; padding: 0;
```
登录后复制
来重置一下，然后根据设计稿重新设置。
color
登录后复制
和
font-size
登录后复制
：直接作用于
```
<li>
```
登录后复制
，可以改变列表项文本的颜色和大小。
line-height
登录后复制
：调整列表项文本的行高，影响行与行之间的垂直间距。
text-indent
登录后复制
：虽然不常用在列表标记上，但可以调整列表项文本的首行缩进。
background
登录后复制
：给
```
<li>
```
登录后复制
设置背景色或背景图片，可以实现斑马线效果或者其他视觉分隔。

更进一步，当

list-style

登录后复制

提供的能力都无法满足时，我们甚至可以完全隐藏默认的列表标记（

list-style: none;

登录后复制

），然后利用CSS的伪元素（
::before
登录后复制
或
::after
登录后复制
）来创建任何我们想要的自定义标记。这给了我们几乎无限的自由度。

<style>
  ul {
    list-style: none; /* 移除默认标记 */
    padding-left: 0; /* 移除默认内边距 */
  }

  li {
    position: relative; /* 为伪元素定位提供参考 */
    padding-left: 20px; /* 为自定义标记留出空间 */
    margin-bottom: 8px; /* 列表项间距 */
    color: #333;
    line-height: 1.5;
  }

  li::before {
    content: '→'; /* 插入一个箭头符号 */
    position: absolute;
    left: 0;
    color: #007bff; /* 标记颜色 */
    font-weight: bold;
    margin-right: 5px;
  }
</style>

<ul>
  <li>这是一个自定义标记的列表项</li>
  <li>我可以自由控制标记的样式和位置</li>
  <li>这比`type`属性强大太多了</li>
</ul>

登录后复制

这种伪元素的方法，是我在遇到复杂列表设计时最常用的手段，因为它能实现任何视觉效果，无论是简单的图标、复杂的图案，还是像一个编号系统。

如何创建完全自定义的无序列表标记？

创建完全自定义的无序列表标记，其实就是前面提到的一种进阶技巧，它超越了

list-style-type

登录后复制

的限制。核心思路是：先隐藏掉浏览器默认的列表标记，然后用CSS伪元素（
::before
登录后复制
或
::after
登录后复制
）来生成你自己的标记。

具体步骤是这样的：

移除默认标记和边距： 给
```
<ul>
```
登录后复制
或
```
<li>
```
登录后复制
设置
```
list-style: none;
```
登录后复制
。同时，通常需要把
```
<ul>
```
登录后复制
默认的
```
padding-left
```
登录后复制
也设为
```
0
```
登录后复制
，这样列表项就不会有默认的缩进。
```
ul {
  list-style: none;
  padding-left: 0;
}
```
登录后复制
为列表项设置相对定位： 给
```
<li>
```
登录后复制
元素添加
```
position: relative;
```
登录后复制
。这是为了让后面要创建的伪元素能够相对于
```
<li>
```
登录后复制
自身进行精确的定位。
```
li {
  position: relative;
  /* 其他样式，如行高、字体等 */
}
```
登录后复制

使用

::before

登录后复制

伪元素创建标记： 在

<li>

登录后复制

内部使用

::before

登录后复制

伪元素来插入你想要的标记。

content

登录后复制

属性是关键，它可以是任何字符串（包括Unicode字符、表情符号），也可以是

url()

登录后复制

指向的图片。然后通过

position: absolute;

登录后复制

来精确定位这个伪元素。

li::before {
  content: '✓'; /* 或者 '•', '★', '?', 或者 url('path/to/icon.svg') */
  position: absolute;
  left: 0; /* 或者根据需要调整 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精确垂直居中 */
  color: green; /* 标记的颜色 */
  font-size: 1em; /* 标记的大小 */
  width: 1em; /* 如果是图标，控制宽度 */
  text-align: center; /* 如果是文本，居中 */
}

登录后复制

调整
```
<li>
```
登录后复制
的
padding-left
登录后复制
：为了给自定义标记留出空间，你需要给
```
<li>
```
登录后复制
设置一个
```
padding-left
```
登录后复制
，其值要大于你的标记宽度加上你希望标记与文本之间的间距。
```
li {
  padding-left: 2em; /* 留出足够的空间 */
  /* ... 其他样式 */
}
```
登录后复制