Есть обычная навигация
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;
}
Комментариев нет:
Отправить комментарий