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

Answer 2

这样做：

li#selectedCat {
    padding: 5px;
    background-color: #FFCC00;
    list-style-position: inside;
    list-style-type: disc;
}

演示：http://dabblet.com/gist/2775371