Испытание: горизонтальное меню [20/28] Как удлинить элемент

Курсы §13. Мастерская: создаём меню
1

Подскажите пожалуйста как быть с последним элементом списка?

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: горизонтальное меню</title>
    </head>
    <body>
        <ul class="main-menu">
            <li><a href="/courses">Курсы</a></li>
            <li><a href="/demos">Демонстрации</a></li>
            <li class="active"><a href="/public_profiles">Участники</a></li>
            <li><a href="/achievements">Достижения</a></li>
        </ul>
    </body>
</html>

В CSS
html,
body {
margin: 0;
padding: 0;
}

body {
    width: 430px;
    min-height: 280px;
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #ecf0f1;
}

.main-menu {
    margin: 0px;
    padding-left: 5px;
    list-style: none;
}

.main-menu li {
    display: inline-block;
    border-left: 2px solid #2c3e50;
    margin-left: -5px;
}

.main-menu a {
    display: block;
    
    padding: 10px 15px;
    color: #ffffff;
    background-color: #2980b9;
    text-decoration: none;
}

.main-menu > .active > a  { background-color: #1abc9c;
}

/*  .main-menu > ./achievements > a {} - так элемент не задается(

HHHHEr.jpg709×654 53.5 KB

2

Или задать синий фон .main-menu, или увеличить отступ справа у последнего пункта (ссылки).

1 лайк
3

C background-color сработало, спасибо. А вот с одступом для последней ссылки чёт не выходит.

прописываю

.main-menu > ./achievements > a { padding-right: 10px;}

Я не могу понять зачем стилю в HTML задали знак “/” он почему-то теперь не береться в CSS

4

Это не стиль в HTML, это просто адрес у ссылки. Так нельзя писать. Придумайте отдельный класс этой ссылке или воспользуйтесь псевдоклассом :last-child для ее выбора.

1 лайк
5

Столкнулся с этой же проблемой и пытался решить ее через :last-child, но либо я что-то в синтаксисе упускаю, либо в наследии, подскажите как нужно правильно прописать под последнюю ссылку чтобы ее сделать длиннее, как в образце?

.main-menu a:last-child {
padding-right:40px;
}

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

6

Имеется в виду последняя ссылка у родителя, то есть у li. У каждого li внутри есть ссылка (она и первая и последняя одновременно). А вы хотите выбрать ссылку внутри последнего пункта меню.

1 лайк
7

Да это же гениально)))

.main-menu li:last-child a {
padding-right:40px;
}

Сработало на 100% )
Спасибо.

1 лайк