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

Здравствуйте!
Подскажите пожалуйста хороший ли код написал?
компактный или можно еще доработать сделать код по короче?

ul {
margin-left: 4px;
margin-top: 0;
padding: 0;
white-space: nowrap;
}
.main-menu li {
list-style: none;
display: inline-block;
margin-left: -4px;
}

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

.active a {
background: #1abc9c;
padding: 10px 15px;
width: 67px;
}

li:last-child {
width: 136px;
margin-left: -5px;
}

li:nth-child(2) {
width: 126px;
margin-left: -5px;
}

Нет, код плохой.

  1. Вам в условии задачи сказано: "отступы кратны “5” - у Вас же большинство НЕ кратно!
  2. Зачем задавать длину абсолютно каждому li?
  3. Селектор лучше формировать из названия класса при теге - тем более, если он есть (не ul {}, а .main-menu {})
  4. Много дублирующий свойств - зачем всюду идёт padding: 10px 15px?
  5. Какую функциональную нагрузку несёт на себе white-space: nowrap?
  6. list-style: none; - задаётся всему списку ul.

Алексей,

большое спасибо за комментарий, буду стараться улучшаться:)

1 лайк

Если у последнего пункта делаю отступ 35, то он перемещается на новую строку. Как исправить? Я увеличил ширину body на 1px, и тогда все получается. Но должно же быть другое решение

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:5px;
padding:0;
}

.main-menu li{
display: inline-block;
background-color:#2980b9;
margin:-5px;
border-left:2px solid #2c3e50;
padding:10px 15px;
}

.main-menu a{
display:block;
color:#ffffff;
text-decoration:none;
padding-right: 5px;
}

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

.main-menu li:last-child{

padding-right: 34px;

}

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA

Намудрили с отступами. Пишете margin с каждой стороны, хотя в данном случае отрицательные имеют смысл только если они горизонтальные.
Размеры пунктов меню - это размеры ссылок. Тогда при отрицательном отступе ширина пункта меню уменьшаться не будет.