Как растянуть ссылки по ширине блока без отступов по краям (принцип работы justify в text-align)?

Добрый вечер!
Пытаюсь растянуть ссылки по ширине родительского блока. Причем отступов у первой и у последней ссылки быть не должно. Пробовал:
- через table (для родительского блока) и table-cell (для блока, в который завернута каждая ссылка) - отступы, само собой есть
- через inline-block, разделить путем padding \ margin и спозиционировать через text-align:center - отступы есть
- через float, разделить путем padding \ margin - аналогично предыдущему

Если при применении двух последних способов убрать у первой и последней ссылки левый и правый отступы соответственно (чтобы они своими границами примыкали к границам блока), возникнет еще более некрасивая ситуация: промежуток между первой и второй \ последней и предпоследней ссылками будет больше, чем у всех остальных (и это понятно, мы же нарушили равновесие).

Что я получаю обычно (первая ссылка имеет отступ от границы):
f406786c4a894a51ab79e089ad8c3451.jpg

Что надо получить (первая ссылка начинается от той же границы, что и контент, отступы между ссылками равны):
0f6f2384ff7742c3a4e3fb57c3c91c9b.jpg

Обращаться к js ужасно не хочется. Есть ли способы решения этой задачи на чистом css?
  • Вопрос задан
  • 5765 просмотров
Решения вопроса 2
@eandr_67
web-программист (*AMP, Go, JavaScript, вёрстка).
В этой статье перечислено несколько способов решения данной проблемы - на любой вкус. Только CSS и никакого JS.
Ответ написан
Комментировать
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Сверстал ваш пример самым старинным способом cssdeck.com/labs/8qsqyyqr
Фишка в text-align: justify и псевдо-элементе с шириной 100%. Псевдо-элемент создает новую (вторую) строку, и поэтому к ссылкам (первой строке) применяется justify.
Ссылок может быть любое количество, ссылки переносятся на следующую строку, если не помещаются в контейнер.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
chigoe
@chigoe
Design, front-end, wordpress
Так? Или я не понял...
Ссылка

Дубль 2:
Тогда может так? У первой нет отступа и у последней.
Ссылка
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы