创建无项目符号的无序列表

在网页开发中，有时需要创建无项目符号的无序列表。下面介绍几种常见的实现方法。

实现步骤

使用 CSS 的 list-style-type 属性

通过设置父元素（通常是 <ul>）的 list-style-type 属性为 none，可以移除列表项的项目符号。示例代码如下：

ul {
    list-style-type: none;
}

若想同时移除缩进，可以添加 padding: 0 和 margin: 0：

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

使用 Bootstrap 类

• Bootstrap 2：使用 unstyled 类

<ul class="unstyled">
    <li>...</li>
</ul>

• Bootstrap 3、4 和 5：使用 list-unstyled 类

<ul class="list-unstyled">
    <li>...</li>
</ul>

内联样式

在 <ul> 或 <li> 标签中直接使用 list-style 或 list-style-type 属性。

<ul style="list-style: none;">
    <li>...</li>
</ul>

或者在 <li> 标签中设置：

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

创建 CSS 类

为避免重复设置样式，可以创建一个 CSS 类：

<style>
    ul.no-bullets li {
        list-style-type: none;
    }
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

必要时可以使用 !important 强制应用样式：

<style>
    ul.no-bullets li {
        list-style-type: none !important;
    }
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

使用 ::marker 伪元素

• 将 ::marker 颜色设为透明

ul li::marker {
    color: transparent;
}

• 将 ::marker 内容设为空

ul li::marker {
    content: "";
}

若要移除特定列表项的项目符号，可以使用 nth-child 选择器：

ul li:nth-child(n)::marker { /* Replace n with the list item's position */
    content: "";
}

使用 HTML 描述列表

使用 <dl>、<dt> 和 <dd> 标签创建描述列表，可实现无项目符号的列表效果：

<dl>
    <dt>List Item 1</dt>
    <dd>Sub-Item 1.1</dd>
    <dt>List Item 2</dt>
    <dd>Sub-Item 2.1</dd>
    <dd>Sub-Item 2.2</dd>
    <dd>Sub-Item 2.3</dd>
    <dt>List Item 3</dt>
    <dd>Sub-Item 3.1</dd>
</dl>

其他方法

• 使用 display: block 让列表项垂直排列且无项目符号：

li {
    display: block;
}

• 完全移除 <ul> 的默认样式：

list-style-type: none;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;

最佳实践

• 优先使用 CSS 类来管理列表样式，避免内联样式，以提高代码的可维护性。
• 当样式冲突时，先使用 !important 进行测试，确定问题后找到更具体的选择器来解决。

常见问题

• 样式不生效：可能是其他样式覆盖了当前设置。可以使用 !important 进行测试，若问题解决，则需找到更具体的选择器。同时，检查 li:before 是否包含内容，若有，可将其 display 属性设为 none。
• 浏览器兼容性：大部分方法在现代浏览器中都能正常工作，但在一些旧版本浏览器中可能存在兼容性问题。建议在不同浏览器中进行测试。