Как растянуть пункты меню по всей ширине родительского блока?

265

28 февраля 2017, 14:55

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

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:

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

Answer 1

Поставить 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>

Answer 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>