5

Есть обычная навигация:

HTML:

<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

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:

Изображение того, как должно отображаться меню. введите сюда описание изображения

3 ответа 3

3

Поставить 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;
}
<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

2

Вариант на Flexbox

body,
ul {
  margin: 0;
  padding: 0;
}

ul,
ul li,
ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

ul {
  text-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

ul li a {
  min-height: 70px;
  text-decoration: none;
  color: #333;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

ul li a:hover {
  background: #eee;
}
<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

4
  • Тот же самый вариант, что и выше :-) Внутренние отступы у ссылок разные.
    – Frontender
    27 фев 2017 в 8:32
  • Какой вариант выше? Ширина пунктов списка одинаковая, само меню растянуто по ширине. Или вы хотите, чтоб отступы между текстом были одинаковыми? 27 фев 2017 в 8:43
  • В этом и дело, что ширина пунктов одинаковая. Прикрепил картинку к вопросу.
    – Frontender
    27 фев 2017 в 9:34
  • Теперь понятно. В общем-то ответ вам ниже уже дали. 27 фев 2017 в 11:42
0

А этот вариант не проще?

ul 
 text-align: justify!important;
    text-align-last: justify;
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.