Как мне добиться такого макета для Form Stepper в CSS, где тире могут быть частью двух разных флексбоксов? ⇐ CSS

[Anonymous]

Создание компонента пошагового управления формой, в котором заголовки шагов могут иметь разную длину, однако сами кнопки шагов должны иметь постоянную длину. Немного похоже на этот из Material UI:


I пытался использовать относительное и абсолютное позиционирование и отрицательные поля, чтобы попытаться разместить тире между шагами на постоянном расстоянии от кругов, но безуспешно. Не знаю, как этого добиться с помощью флексбоксов, поскольку им не нравится объединяться друг с другом. Кроме того, я визуализирую шаги в цикле (v-for). Моя первоначальная идея заключалась в том, чтобы отобразить тире, расположить его в нужном месте, а затем отобразить следующий компонент, но тире приводит к рендерингу следующего компонента с дополнительным пробелом. Пример моего кода, так как моя текущая реализация довольно далека от моей первоначальной идеи.






Step1



Step2



Step3







.form-stepper {
display: flex;
flex-direction: rows;
align-items: center;
}

.step-component {
display: flex;
flex-direction: column;
}

.button {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}

.dash {
width: 60px;
height: 5px;
background-color: #bbb;
}





Подробнее здесь: https://stackoverflow.com/questions/786 ... es-are-abl