Испытание: горизонтальное меню [20/28]. Мое решение на 100% и подробная инструкция.


#22

Ссылка является строчным элементом. Также вы не обнулили внутренние отступы у списка.
Будьте внимательны, в теории всё это есть.


#23

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:0;
padding:0;
list-style:none;
background:#2980b9;
}
li { /* Можно li вводить без .main-menu и резултат тот что и с .main-menu /
display:inline-block;
}
a { /
/* Можно a вводить без .main-menu и резултат тот что и с .main-menu */
display:block;
padding:10px 15px;
margin-right:-5px;
color:#ffffff;
border-left:2px solid #2c3e50;
text-decoration:none;
}
.active a {
background:#1abc9c;
}


#24

При такой записи свойства для li и а будут применяться во всём документе – глобально.
Помимо меню могут быть другие списки и другие ссылки, – им, скорее всего, нужны будут другие свойства.

mail-menu li, mail-menu a – ,будут работать только в пределах mail-menu.


#25

Спасибо !


#26

Объясните мне пожалуйста этот пункт , почему именно так ?

“Если фон задать не самому списку, а его элементам либо ссылкам, то в конце вы столкнетесь с проблемой, что последний пункт меню не будет растянут по всей ширине, а будет с учетом содержимого и отступов.”


#27

#28

Не самое лучшее решение с пунктом “Достижения” (имею ввиду, что вы “расширяете” его за счет бэкграунда контейнера. Получается, что край этого блока будет не кликабельный (не будет ссылкой), проверьте сами. На мой взгляд, это косяк)
Можно например использовать last-child и увеличить правый паддинг.

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