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

Question

[Андрей Канаев]

Есть блок

<div class="navigation">
  <a href="#">Услуги</a>
  <a href="#">Портфолио</a>
  <a href="#">Клиенты</a>
  <a href="#">Команда</a>
  <a href="#">Блог</a>
  <a href="#">Контакт</a>
</div>

нужно чтобы эти ссылки занимали все пространство блока.

Answer 1

[Кирилл]

1. inline-block для ссылок и text-align: justify - погуглите как реализовать
2. Flexbox
3. Если количество ссылок фиксированное, то display: block, float-left и width: 16,66666666666667%

Comments

[Андрей Канаев]

Спасибо, реализовал с помощью flex!

[Максим]

1п. не работает в ie

[Кирилл]

maxnrg33: в 8 точно работает

[Максим]

Кирилл Кубляков: 2.antines.ru посмотри тут в шапке. может я что-то не то указываю

[Кирилл]

maxnrg33: html5shiv нужно в head подключать, а не перед закрывающим body. Возможно в этом проблема. Потому что в 8 ИЕ у тебя стили на пункты меню вообще не применяются. Весь этот блок, заключенный в условный комментарий перенеси в head и протестируй.

[Максим]

Кирилл Кубляков: так я тестирую в ie11

[Кирилл]

maxnrg33: В 9, 10, 11 у меня норм все с твоим сайтом, тут я хз =)

[Максим]

как так ?)
c2n.me/3C4koGn

[Максим]

Кирилл Кубляков: как ты тестируешь в разных версиях ?

Answer 2

[Максим Тимофеев]

Вот готовое решение:
getbootstrap.com/components/#nav-justified
возьмите его или подсмотрите реализацию

Comments

[Илья]

div {width:100%; display: table;}
a {display: table-cell; width:1%; text-align: center;}

[Илья]

codepen.io/Rimush/pen/kkrWgp