Как правильно реализовать вертикальный степпер через список?
Подскажите, пожалуйста, как правильное реализовать.
Я пытаюсь через ol, но не могу понять как выровнять сам маркер относительно li с текстом
Дополнительно:
код где?
а лучше демка на codepen.
Теперь нужно выполнить второй шаг - написать код, с которым у Вас не получилось и нужна помощь, а не просто шаблон, чтобы сделали за Вас.
Но он не позволит Вам сделать так, как на дизайне, потому что у него ограничены свойства, которые ему можно задавать. Там грубо говоря разрешено всё что относится к тексту.
Поэтому тут нужно скрывать стандартный маркер и пользоваться псевдоэлементами и css счётчиками.
ol{ list-style-position:inside; display:inline-block; counter-reset: example 0;} li{ text-align:left; position: relative; list-style-type:none; position: relative; padding: 2.5rem 0; } li::before{ content: counter(example, decimal); counter-increment:example 1; position:absolute; width: 1.75rem; height: 1.75rem; position: absolute; left: calc(50% - 1.75rem); top: -1rem; border: .1rem solid red; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 90%; background: #fff; z-index: 1; color: red; } li::after { content: ""; width: 0.01rem; height: 4rem; background: red; position: absolute; left: calc(50% - .85rem); top: -2rem; } li:first-child::after { content: ""; width: .01rem; height: 2rem; background: red; position: absolute; left: calc(50% - .85rem); top: 0; } li:last-child::after { content: ""; width: .01rem; height: 2rem; background: red; position: absolute; left: calc(50% - .85rem); top: -2rem; } .info__text{ padding-top: 50px; width: 800px; text-align:center; margin:0 auto; position: relative; } |
ol{ list-style-position:inside; display:inline-block; counter-reset: example 0;} li{ text-align:left; position: relative; list-style-type:none; position: relative; padding: 2.5rem 0; } li::before{ content: counter(example, decimal); counter-increment:example 1; position:absolute; width: 1.75rem; height: 1.75rem; position: absolute; left: calc(50% - 1.75rem); top: -1rem; border: .1rem solid red; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 90%; background: #fff; z-index: 1; color: red; } li::after { content: ""; width: 0.01rem; height: 4rem; background: red; position: absolute; left: calc(50% - .85rem); top: -2rem; } li:first-child::after { content: ""; width: .01rem; height: 2rem; background: red; position: absolute; left: calc(50% - .85rem); top: 0; } li:last-child::after { content: ""; width: .01rem; height: 2rem; background: red; position: absolute; left: calc(50% - .85rem); top: -2rem; } .info__text{ padding-top: 50px; width: 800px; text-align:center; margin:0 auto; position: relative; }
Абсолют там не нужен от слова вообще, обычным блоком поставьте.
sirenko, Для первого раза не плохо.
Но есть ряд нюансов:
1) Дивы нельзя вкладывать в списки. Это не валидно
2) Вы хардкодите значения для каждого элемента. Это лишнее.
3) Если текста будет другое количество, то всё поплывёт.
4) Не нужно два псевдоэлемента, чтобы нарисовать 2 линии. Достаточно одного для длинной линии и другого для цифры поверх.
Переписал на скорую руку (какие то стили для Вас могут оказаться лишними. Прописаны исключительно для демки):
snippet
- Ещё раз большое спасибо
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания вертикального степпера через список можно воспользоваться HTML и CSS. Ниже приведен пример кода, который позволит реализовать данную функциональность:
```html
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 20px;
}
span {
width: 30px;
height: 30px;
border-radius: 50%;
background: #007bff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
p {
margin-left: 10px;
}
Step 1
Step 2
Step 3
Step 4
```
В данном коде мы создаем список `
`, в котором каждый элемент списка `- ` представляет собой отдельный шаг степпера. Для отображения номера шага используется ``, а для описания шага - `
`. С помощью CSS задаем стили для элементов списка, чтобы они выглядели как степпер.
При необходимости можно дополнить данный код дополнительными стилями или функциональностью, например, добавить возможность переключения между шагами с помощью JavaScript.