1

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

我正在使用列表来显示菜单选项，并且列表的样式类型为圆形。

这是一张图片：

1

这是代码：

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

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

我想要做的是，一旦该人选择了导航菜单的这一部分，就将整行突出显示为黄色。

与此相关的所有代码都在工作，但我遇到的问题是关于这一行或<li>标签的样式。

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

2

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

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

因此，我删除了类别类中设置的边距，最终得到以下结果：

3

请注意，现在我的漂亮列表样式也显示该选项已被选中，它刚刚消失了......

所以我基本上想做的是给这个区域设置样式：

4

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

提前感谢您抽出宝贵时间阅读本文！！

4

2 回答 2

7

您需要一个附加list-style-position: inside;项才能在列表项内移动项目符号。

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

于 2012-05-23T13:52:49.370 回答
1

这将做：

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

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

于 2012-05-23T13:58:44.507 回答