html无序列表去掉点

打开任意一个网页，无序只要里面用了 <ul> 标签，列表浏览器默认就会在每一行前面画一个小圆点。去掉这个圆点叫 list-style-type，无序默认值是列表 disc。想干掉它，去掉最直接的无序办法是在 CSS 里写 ul { list-style: none; }。一行代码，列表点就没了。去掉

但事情没这么简单。无序我见过不少人写完这行代码，列表点确实消失了，去掉可列表项左边还留着一截空白——那是无序浏览器给 <ul> 预留的 padding-left，通常是列表 40px 左右。圆点虽然不画了，去掉空间还在那儿杵着。所以完整写法得把 padding 也清掉：

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

三个属性各管各的。list-style 管那个符号，padding 管左边距，margin 管上下间距。少写一个，效果就打折扣。

有人会问：那我直接在 HTML 里写 <ul style="list-style:none"> 行不行？行，但不推荐。行内样式一多，改起来就是灾难。今天你只想去掉一个列表的点，明天产品说所有列表都不要点，你还得挨个去翻 HTML 文件。写在 CSS 里，改一处就够了。

还有一种情况：列表项用的不是 <ul> 而是 <ol>。有序列表默认显示的是数字，去掉它的办法一样——list-style: none 对两者都管用。不过去掉数字之后，列表就彻底失去了“顺序”的视觉提示。如果你确实需要保留顺序感，又不想用默认的数字样式，可以用 list-style-type: decimal 配合自定义计数器，或者干脆用 CSS counter 自己画。这是另一个话题了。

实际项目里，导航栏是最常跟无序列表打交道的地方。你去看任何一个网站的顶部菜单，几乎都是用 <ul> 做的。为什么？语义清晰，结构规整，对屏幕阅读器友好。但没人想在导航栏每个链接前面看到一个小圆点。所以几乎每个前端项目的基础样式表里，都会有一句全局的 ul { list-style: none; }。这行代码太常见了，常见到你打开 Chrome DevTools，随便点一个网站，去翻它的 reset.css 或者 normalize.css，大概率能找到。

说到 reset，就不得不提一个细节。有些 CSS 框架，比如早期的 Bootstrap，会把 <ul> 的默认样式全部抹掉，包括 padding 和 margin。这带来的副作用是：如果你在文章正文里写了一个普通的无序列表，想让它带点缩进，结果发现所有列表都贴到了左边，看起来跟普通段落没区别。这时候你得手动把 .article ul 的 padding-left 加回来。框架帮你省了事，也给你挖了坑。

还有一个容易被忽略的点：list-style 其实是个简写属性，它同时控制 list-style-type、list-style-position 和 list-style-image。写 list-style: none 等于把这三项全设为 none。如果你只想去掉圆点但保留其他设置，可以单独写 list-style-type: none。不过大多数时候，简写就够了。

我自己的习惯是在全局样式里写这么一段：

ul, ol {  list-style: none; padding: 0; margin: 0; } .article-content ul {  list-style: disc; padding-left: 1.5em; margin: 1em 0; }

全局干掉所有列表的默认样式，然后在需要显示圆点的地方单独恢复。这样导航栏、工具栏、下拉菜单这些地方不用反复写 list-style: none，而文章正文里的列表又不会光秃秃的。

最后提一句兼容性。list-style: none 在所有现代浏览器里都没问题，包括 IE9 及以上。如果你要兼容更老的 IE，得注意 list-style-image 在某些版本下会有渲染 bug，但单纯去掉圆点这个操作，从来没出过问题。放心用。