Есть обычная навигация
HTML:
CSS:
nav { font-size: 0; line-height: 0; letter-spacing: -1px; }
nav li { display: inline-block; }
nav a { display: block; background: #000; padding: 0 10px; font-size: 17px; line-height: normal; letter-spacing: normal; color: #fff; }
nav li:nth-child(2n) a { background: #666; }
Как пункты меню растянуть по всей ширине блока nav, чтобы padding у всех ссылок был одинаковым (пустого пространства между ссылками быть не должно, это пространство распределяется на внутренние отступы ссылок)?
UPD:
Изображение того, как должно отображаться меню.
Ответ
Поставить display: flex родителю, flex-basis: auto + flex-grow: 1 — потомкам.
body,
ul {
margin: 0;
padding: 0;
}
ul {
display: flex;
}
ul li {
list-style-type: none;
flex-basis: auto;
flex-grow: 1;
background: #000;
text-align: center;
}
ul li:nth-child(2n) {
background: #ccc;
}
ul li a {
padding: 20px 0;
text-decoration: none;
color: #ccc;
display: block;
}
ul li:nth-child(2n) a {
color: #000;
}
Комментариев нет:
Отправить комментарий