Задать вопрос

Как сверстать такое меню?

Доброе утро всем.
Как сверстать меню, изображенное на картинке?
546264625ed9.png

Сложность заключается в том, что расстояние между маркерами варьируется и равно половине расстояния между пунктами меню (в одной строке могут быть 4 пункта). И при этом один маркер обязательно должен быть в конце строки, если эта строка не последняя.

Испробованные варианты:
1) Пробовал через псевдоэлементы и padding, но тогда непонятно, как вычислять расстояние между текущим элементом и следующим, а фиксированное минимальное не очень подходит (в нижней строчке, например, пробелы слишком велики).

2) Пробовал через добавление span между ссылками, как разделителя - но тогда могут возникнуть проблемы с обязательным наличием маркера в конце строки, плюс сам способ не ахти и влечет за собой кучу ненужных элементов.

В качестве контейнера во всех случаях использовал div с text-align: justify, display ссылок, естественно, inline-block.

Максимум, которого я достиг (1й вариант):
494479f88587476da6bf06e6e98bad47.jpg

Как добиться результата на первой картинке? Буду благодарен за советы, спасибо.
  • Вопрос задан
  • 2314 просмотров
Подписаться 2 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 1
@ukoHka
Всего понемногу
jsfiddle.net/xaxv1wva
Так подойдет?
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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