HTML去掉小圆点：列表样式修改及CSS样式重置方法详解

频道：问答 日期： 浏览：3

在HTML中，列表前默认会有小圆点，可通过CSS样式修改或重置来去掉这些小圆点，以下是详细方法：

使用list-style属性

在CSS中，可通过设置li标签的list-style属性为none将列表前的圆点去掉。list-style属性是一个简写属性，能在一个声明中设置所有的列表属性，它涵盖了list-style-type、list-style-position、list-style-image等其他列表样式属性。该属性可应用到所有display为list-item的元素，在普通HTML和XHTML中常用于li元素，实际上也能应用到任何元素，并由list-item元素继承。示例代码如下：

ul.b { 
    list-style: none;
}

使用list-style-type属性

list-style-type属性用于设置列表项标记的类型，将其值设为none就可将列表项li默认样式移除。示例代码如下：

HTML去掉小圆点：列表样式修改及CSS样式重置方法详解

ul {
    list-style-type: none;
}

直接在li标签里设置样式

可在li标签里面直接加入列表样式。示例代码如下：

<ul> 
    <li style="list-style-type: none;">示例内容1</li> 
    <li style="list-style-type: none;">示例内容2</li> 
    <li>示例内容3</li> 
    <li>示例内容4</li> 
</ul>

给标签添加类名并设置样式

可以给标签一个类名，然后在CSS中为其设置样式。示例代码如下：

HTML部分：

<ul> 
    <li class="a1">示例内容1</li> 
    <li>示例内容2</li> 
    <li>示例内容3</li> 
    <li>示例内容4</li> 
</ul>

CSS部分：

HTML去掉小圆点：列表样式修改及CSS样式重置方法详解

.a1 {
    list-style-type: none;
}

其他相关列表样式属性补充

list-style-image

该属性用于使用图像来替换列表项的标记。不过若设置了list-style-image属性，此时设置的list-style-type属性将不起作用。一般为防止某些浏览器不支持list-style-image属性，会设置一个list-style-type属性来替代。示例代码如下：

ul {
    list-style-image: url(./flower.png);
}

list-style-position

此属性用于设置在何处放置列表项标记。属性值有outside（默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐）和inside（表示列表项目标记放置在文本内，且环绕文本根据标记对齐）。示例代码如下：

.ul1 {
    list-style-position: inside;
}
.ul2 {
    list-style-position: outside;
}