Испытание [20/28] 95%

Курсы §13. Мастерская: создаём меню
1 
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 {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
.main-menu li {
    display: inline-block;
    padding: 10px 15px;
    background-color: #2980b9;
    border-left: 2px solid #2c3e50;
    margin-left: -4px;
    }
    
.main-menu a {
    color: #ffffff;
    text-decoration: none;
    }
    
.main-menu li.active {
    background-color: #1abc9c;
    }
    
.main-menu li:last-child {
    padding-right: 40px;
}

Помогите пожалуйста, хочу довести до 100%. И еще беспокоюсь о качестве кода.
Скрин вкладки различия screen

2

Отступы должны быть прописаны ссылкам.

1 лайк
3 
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 {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
.main-menu li {
    display: inline-block;
    background-color: #2980b9;
    border-left: 2px solid #2c3e50;
    margin-left: -4px;
    }
    
.main-menu a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    }
    
.main-menu li.active {
    background-color: #1abc9c;
    }
    
.main-menu li:last-child {
    padding-right: 40px;
}

почему-то не получилось.

screen2
screen2.jpg1285×658 114 KB

4

Не очень поняла - зачем? Из-за этого у вас последний пункт перенесся на следующую строку.

Вообще, при стилизации меню всё, что касается внешнего вида, я задаю для ссылки. В особенности padding. Конечно margin и padding для ul, заданные по умолчанию, обнуляются. Если Вы “увеличиваете” ссылку a, то даже при наведение на поле вокруг текста курсор меняется и при клике Вы перейдете по ссылке. Но если Вы стилизуете li, то для перехода нужно обязательно нажать именно на текст. Не очень удобно, согласитесь. Чтобы лучше это продемонстрировать, я набросала демку - посмотрите.

Единственное - для li нужно задать небольшой отрицательный отступ справа, чтобы компенсировать расстояние, которое возникает между пунктами из-за display: inline-block. На демке его хорошо видно.

2 лайка
5

Вы не сделали ссылку блочной.

1 лайк
6

Спасибо! Особенно за демку. Как нельзя кстати. К слову, сейчас ищу работу, поэтому активно прохожу курсы и практикуюсь.

7

Ура! 100%.

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

.main-menu li {
display: inline-block;
}

.main-menu a {
display: block;
text-decoration: none;
padding: 10px 15px;
border-left: 2px solid #2c3e50;
background: #2980b9;
color: white;
margin-right: -5px;
}

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

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

забавно а у меня это не 100%, последний пункт при таком коде не влезает ипереносится)

9

Да, переносится, но задание всё равно засчитывается на 100%. Сам удивлён

10

Возможно не хватает:

body {
width: 431px;
…

Внёс это изменение и всё стало 100%