Как удалить изображение разделителя из меню

98
9

Я создал меню с разделительным изображением. поэтому каждый элемент списка выглядит отдельно друг от друга. но проблема в том, что я не мог понять, как удалить последний разделитель. Я пробовал с li: last-child {background: none}, но он не работает. вот код, который я использую в данный момент:

.top-menu {
background: url(../images/bg_linkstop.jpg) repeat-x;
border: #FFF 2px solid;
border-radius: 10px;
margin: 10px 0;
height: 52px;
list-style: none;

li {
float: left;
height:48px;
padding: 0 22px;
background : url(../images/bg_divisor.png) no-repeat center right;

}
}

И вот результат:

enter image description here

Вы можете видеть, что он выглядит не очень хорошо, поскольку последний пункт меню имеет разделитель на правой стороне. Я хочу удалить это изображение разделителя.

спросил(а) 2013-07-04T16:08:00+04:00 7 лет, 2 месяца назад
1
Решение
113

Вы можете посмотреть :last-of-type селектор :last-of-type, он считает, что он объясняет сам. Хотя этот селектор не работает для IE8 раньше

Вы можете найти дополнительную информацию для этого селектора здесь

ответил(а) 2013-07-04T16:12:00+04:00 7 лет, 2 месяца назад
40

 li {
float: left;
height:48px;
padding: 0 22px;
background : url(../images/bg_divisor.png) no-repeat center left;
}

Измените позицию bg справа налево, чтобы вы могли настроить таргетинг на первый элемент (см. Ниже)


Первый ребенок поддерживает IE8

li:first-child {
background: none;
}

ответил(а) 2013-07-04T17:03:00+04:00 7 лет, 2 месяца назад
41

Попробуйте добавить следующее правило после своего css:

.top-menu li:last-child {
background :none;
}

Обязательно поместите это после кода css, который вы указали. нет причин, по которым это не должно работать. (если вы считаете, что у вас есть конфликт, попробуйте добавить !important)

Это приведет к удалению фона только для последнего совпадающего li.

ответил(а) 2013-07-04T16:11:00+04:00 7 лет, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема