HTML/CSS - 列表 - 使用列表样式时将背景颜色应用于整行？

Question

我正在尝试重新设计我的网站菜单配置.

我使用列表来显示菜单选项,列表的样式类型为圆形.

这是一张图片:

以下是代码:

<li class='category'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li.listCategory {
    list-style-type: circle;
    margin-left: 17px;
}

我想要做的是,一旦此人选择了导航菜单的这一部分,整个行将以黄色突出显示.

与此相关的所有代码都有效,但我遇到的问题是关于此行或<li>标记的样式.

我的第一次尝试会产生不良影响:

<li class='category' id='selectedCat'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li#selectedCat {
    background-color: #FFCC00;
    list-style-type: disc;
}

所以我删除了类别类中设置的边距,最后结果如下:

请注意,现在我的漂亮列表样式也显示已选中此选项刚刚消失...

所以我基本上要做的就是设计这个区域:

有没有人对我如何完成这项任务有任何建议或想法？

提前感谢您花时间阅读本文!

Answer 1

您还需要一个额外的内容list-style-position: inside;来移动列表项中的项目符号.

https://developer.mozilla.org/en/CSS/list-style-position