Изменить цвет фона выбранного элемента li

Question

Изменить цвет фона выбранного элемента li

0

Я сделал навигацию со списком, который дает элемент списка класс. .selected когда на текущей странице. Я пытаюсь добавить цвет фона к этому классу, который работает, но я не могу заставить его заполнить весь элемент 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;

}

Davo23 17 окт. 2013, в 14:30

Источник

0

Вы можете поставить это в скрипке?
Gopi Krishna 17 окт. 2013, в 12:18
0

У вас есть padding и margin в классе nav li. Попробуйте использовать отступы и / или поля в .selected тоже.
StudioArena 17 окт. 2013, в 12:18

Теги:

html

css

4 ответа

0

Элемент списка с selected классом полностью заполняется в соответствии с инструкциями, которые вы предоставили браузеру, чтобы отобразить элемент li с margin-left: 15px; и padding: 22px 15px 22px 0; , Прописное слово, которое вы указали, указывает, что в элементе списка не должно быть отступов слева от содержимого (последнее значение 0).

Попробуйте удалить margin-left: 15px; и измените ваш padding на 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;
}

vtamm 17 окт. 2013, в 10:42

0

поля и границы не получают цвет фона.

попробуйте привязать его к листу как к прописке, так и к границе того же размера.

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;
}

Praveen B 17 окт. 2013, в 10:39

0

измените значение padding-left:

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

yakiang 17 окт. 2013, в 09:38

Ещё вопросы

Вы можете поставить это в скрипке?
У вас есть padding и margin в классе nav li. Попробуйте использовать отступы и / или поля в .selected тоже.

Abijeet Patro · Accepted Answer · 2013-10-17T10-55-00.000Z

Просто дайте некоторое дополнение слева к li -

padding: 22px 15px 22px 15px;

Здесь jsFiddle

Спасибо! Я целую вечность ломал голову над этим!