更改所选 li 项目的背景颜色答案

【问题标题】：Change background colour of selected li item更改所选 li 项目的背景颜色
【发布时间】：2013-10-17 20:26:45
【问题描述】：

我已经制作了一个带有列表的导航，该列表在当前页面上为列表项提供类.selected。我正在尝试为这个类添加一个背景颜色，但我无法让它填充整个li 项目。它不会在 navs 选定的 li 项目的左侧添加任何背景颜色。不确定这是否有意义？

这是我的html：

<nav>
    <ul>
        <li class="selected"><a href="index.html">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Themes</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

这是css：

nav li {
  border-right: solid 1px #fbfbfb;
  display: inline;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  list-style: none;
  margin-left: 15px;
  padding: 22px 15px 22px 0;
  text-transform: uppercase;
  text-align: center;
}

nav ul {
  border-top: solid 1px #fbfbfb;
  border-left: solid 1px #fbfbfb;
  margin-bottom: 0;
  padding: 20px 0;
}

nav a {
  color: #6e6e6e;
  text-decoration: none;
}

nav a:hover {
  border-bottom: 1px solid #2ecc71;
}

.selected {
  background-color: #2ecc71;

}

【问题讨论】：

你能把它放在小提琴里吗？
您在类 nav li 中有填充和边距。尝试在 .selected 中使用填充和/或边距。

标签： html css

【解决方案1】：

只需在li 的左侧添加一些填充 -

padding: 22px 15px 22px 15px;

这是jsFiddle

【讨论】：

【解决方案2】：

更改您的 padding-left 值：

nav li {
    padding: 22px 15px 22px 10px;
}

【讨论】：

【解决方案3】：

边距和边框没有背景颜色。

尝试将 li 的边距更改为填充或相同大小的边框。

nav li {
  border-right: solid 1px #fbfbfb;
  display: inline;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  list-style: none;
  padding: 22px 15px 22px 15px;
  text-transform: uppercase;
  text-align: center;
}

【讨论】：

【解决方案4】：

类selected的列表项正在完全按照您给浏览器的说明填充，以显示带有margin-left: 15px;和padding: 22px 15px 22px 0;的li元素。您指定的填充表示列表项中内容的左侧不应有填充（最后一个值为 0）。

尝试删除 margin-left: 15px; 并将 padding: 22px 15px 22px 15px; 的填充更改为 nav li 元素，如下所示：

nav li {
  border-right: solid 1px #fbfbfb;
  display: inline;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  list-style: none;
  padding: 22px 15px 22px 15px;
  text-transform: uppercase;
  text-align: center;
}

【讨论】：