Горизонтальная навигация с разбросом свободного пространства внутрь айтем

Рейтинг: 0Ответов: 1Опубликовано: 30.09.2014

Имеется навигационное меню: alt text

Задаюсь вопросом: как раскидать горизонтальные отступы так, чтобы в каждом компоненте было поровну?

  1. Можно раскидать компоненты как text-align: justify, но тогда пространство вокруг текста будет некликабельно.
  2. Можно попробовать флексы с justify-content: space-around, но то же самое.
  3. Можно сделать табличкой. Но тогда пространство вокруг текста раскидается пропорционально содержимому, а не поровну.
  4. Ну и остается пробег с замерами ширин жаба-скриптом.

Вопрос: не появилось ли у нас новых инструментов для решения этой задачи?

Ответы

▲ 1

Делаем так:

  • Устанавливаем вид блока: display: table;
  • Задаем этому блоку любую ширину
  • Задаем способ расчета ширины ячеек внутри блока: table-layout: fixed;

Посмотреть пример