【css3】li点击增加背景色填充父级宽度（占整行）

这篇文章起源于写代码时遇到的一个小坑，在使用 ul li 有序列表时，点击某一行显示高亮时，只会在li标签范围内添加背景色，如下图所示：

而我期望的效果，是这样的：

于是我经过了一番摸索，发现了如下情况：
1.背景色在文字右侧区域无法占满的原因是，为了使右侧有留白，在外层增加了padding。

针对这个问题，将 padding-left 和 padding-right 由最外层移到了li这层。

于是变成下面这样：

2.左侧的部分是在ul的默认样式里配置的，最下面的这个 padding-inline-start


修改办法：除了要把 ul 的 padding-inline-start 设置为0以外，还要把 li 的 list-style 改为 disc inside

list-style是用来修改 li 前面marker的样式的，默认是disc outside none。这三个参数分别指的是 list-style-type, list-style-position, list-style-image （类型、样式和图片）。type包含选项：circle、square…，position包含选项：inside、outside、inherit…，image可以url(‘sqpurple.gif’);

经过修改，变成了

大功告成！

有问题随时私信，欢迎交流