今天来跟大家聊聊我在项目里使用列表样式的一些事儿。前些日子我不是接个项目吗，其中有个地方需要用到列表，本来以为就普普通通的列表嘛就 ul、li 一把梭，结果就栽个大跟头。
我想着简单快速地把活干完，就直接用默认的列表样式，就是每个列表项前面有个小黑点的那种。但是后来客户说，这个小黑点和他们整个网站的风格不太搭，能不能换个样式？这一说，我就开始琢磨着怎么改。
尝试使用 list-style-type
我想到的是，用 list-style-type 来改列表项前面的那个标记。我试几个不同的值，比如 circle、square 这些，确实能改变标记的样式，但是客户还是不太满意，他们想要的是那种更精致一点的效果。
- 遇到问题：使用 list-style-type 改变标记样式，但客户不满意。
尝试使用 list-style-image
既然预设的样式不行，那就只能自己找图片。我又试试 list-style-image，把标记换成我自己设计的图片。这回客户倒是满意，但是新的问题又来。不同的浏览器对图片的显示效果好像不太一样，有的图片会有点变形，有的又显示得不完整，简直没法儿看！为让图片标记正常显示，我必须根据每款浏览器的特性进行微调，这也太折磨人。
- 遇到问题：使用 list-style-image 替换标记图片，但不同浏览器显示效果不一。
最终解决方案
没办法，我只能放弃 list-style 属性，转而使用背景图片的方式来实现。具体来说，就是先把默认的列表标记去掉，也就是把 list-style-type 设置成 none。然后，给每个列表项添加一个背景图片，再调整一下内边距，让文字和图片之间有一个合适的距离，保证整体美观统一。出来的效果，客户终于点头，说这回可以。
- 解决过程：
- 使用 list-style-type: none; 去掉默认标记。
- 给列表项添加背景图片。
- 调整内边距，使文字和图片间距合适。
通过这回的实践，我算是彻底明白，以后在遇到类似的需求时，就不能偷懒，不能一上来就用默认的样式，必须先搞清楚客户的需求，再选择最合适的方法来实现。要不然就像我这回一样，走一大圈的弯路，还是得回到原点。
免责声明：由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权，根据《信息网络传播权保护条例》，如我们转载的作品侵犯了您的权利,请您通知我们，请将本侵权页面网址发送邮件到qingge@88.com，深感抱歉，我们会做删除处理。