.main-menu {
background-color: #2980b9;
padding: 0;
margin: 0;
}
.main-menu li {
display: inline-block;
margin-right: -5px;
}
.main-menu a {
background-color: #2980b9;
padding-top: 10px;
padding-bottom: 10px;
padding-left:15px;
padding-right: 15px;
display: block;
text-decoration: none;
border-left: #2c3e50 solid 2px;
color: #ffffff;
}
ul.main-menu .active a {
background-color: #1abc9c;
}
Никто себя так не похвалит, как сам себя…)
я бы вместо кучи падингов по разным сторонам написал один padding 10px 15px
Согласен. Это очевидно, но для тренировки и большей наглядности для себя я раскидал все это по пунктам.
А зачем ещё один бэкграунд, если ты его в .main-menu прописал.
Такой же код, но почему-то 93% 
UPD. Нашел ошибку и поменял margin-left на margin-right. Результат 96%
.main-menu {
padding: 0;
margin: 0;
}
.main-menu li {
display: inline-block;
margin-left: -5px;
}
.main-menu a {
display: block;
text-decoration: none;
color: #ffffff;
background: #2980b9;
border-left: 2px solid #2c3e50;
padding: 10px 15px;
}
.main-menu .active a {
background: #1abc9c;
}
.main-menu {
padding: 0;
margin: 0;
background: #2980b9;
}
Или удлинить последний пункт меню.
Не понимаю зачем задавать бэкграунд всему меню, если у нас есть фон для каждого отдельного пункта? Кстати, попытался костылями увеличить длину последнего пункта и он переносится на другую строчку.
Ваша подсказка с фоном помогла, но въехать в суть “проблемы” пока не могу.
Покажите, как увеличивали ширину последнего пункта.
Дело в том, что ul как блочный элемент тянется на всю ширину body - 430px.
Если вы зададите рамку для .main-menu, то увидите, что его ширина чуть больше, чем суммарная ширина всех пунктов меню.
Я понял. Так как мы задаем бэкграунд для элементов он оставляет справа белый кусок, потому что длина шире, чем сами элементы. Спасибо.
Ширину увеличивал через a:last-child из-за чего он переносился на следующую строку.
окей. если задать background для “ul” и сделать активным пункт меню “Достижения”? будет выделяться не вся кнопка. как с этим бороться?
Ваш код, пожалуйста.
Я где-то не могу найти ошибку и поменять ширину последнего пункта.
}
.main-menu {
padding:0px;
padding:0px;
/* background:#2980b9;*/
}
.main-menu li{
display:inline-block;
margin-right:-5px;
}
.main-menu a{
background:#2980b9;
border-left: 2px solid #2c3e50;
padding:10px 15px;
margin-left:-5px;
display:block;
color:#ffffff;
text-decoration:none;
.main-menu li a:last-child{
width:100px;
}
.main-menu .active a{
background:#1abc9c;
}
Попробуйте изменять ширину последнего пункта не с помощью width, а с помощью padding-right.
я только что нашел банально не закрытую фигурную скобку лицорука. ширина стала меняться, и при помощь width и при помощь паддинг.
а в чем принципиальная разница между паддинг и width в данной ситуации? в любом случае подгонять вручную. а если какие изменения? например “демонстрация” нужно будет изменить на “Демо” опять подгонять, это норма?
Лучше padding. А ширину не прописывать. Тогда общая ширина будет рассчитываться как сумма ширины содержимого (ширины слова) и отступов справа и слева.
правило с селектором a:last-child будет применено к последнему элементу внутри родителя. Т.е. будет выбираться последняя ссылка внутри элемента < li > , а в нашем случае < a > вообще единственный элемент в каждом родительском < li > Поэтому данное правило будет действовать на все ссылки (во всех < li >)
Если же необходимо выбрать только последнюю ссылку (“достижения”), то селектор нужно прописать .main-menu li:last-child a - такой селектор выберет ссылку, находящуюся в элементе, который является последним элементом списка.
подскажите что, нет? никак не получается растянуть последний блок… 96% (
.main-menu {list-style:none;
padding: 0;
margin: 0;
}
.main-menu li { display:inline-block;
margin-right: -5px; }
.main-menu a {display:block;
padding:10px 15px;
background: #2980b9;
color: #ffffff;
border-left: 2px solid #2c3e50;
text-decoration:none;
}
.main-menu > .active > a {background:#1abc9c;}
В этой теме есть ответ на ваш вопрос. Будьте внимательны.