Страницы

Поиск по вопросам

четверг, 11 октября 2018 г.

Как реализовать вертикальную шкалу с номерами на HTML и CSS


Требуется ваш совет, каким образом лучше реализовать такой список по середине с цифрами? Html и Css


Ответ

Пример
* { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: tomato; } ol { list-style: none; color: #fff; counter-reset: count; padding: 1em; position: relative; } ol:before { content: ''; position: absolute; top: 40px; left: 50%; width: 2px; height: 80%; background: #fff; margin-left: -1px; } ol > li { position: relative; margin: 20px 0; padding-right: calc(50% + 28px); } ol > li:nth-child(even) { padding-right: 0; padding-left: calc(50% + 28px); } ol > li:before { counter-increment: count; content: counter(count)" "; position: absolute; top: 0; left: 50%; margin-left: -14px; width: 28px; height: 28px; line-height: 28px; border: 2px solid #fff; background: tomato; z-index: 1; color: #fff; text-align: center; border-radius: 50%; box-sizing: border-box; }

  1. Как реализовать такой список с номерами на Html и Css
  2. Как реализовать такой список с номерами на Html и Css
  3. Как реализовать такой список с номерами на Html и Css
  4. Как реализовать такой список с номерами на Html и Css
  5. Как реализовать такой список с номерами на Html и Css
  6. Как реализовать такой список с номерами на Html и Css
  7. Как реализовать такой список с номерами на Html и Css
  8. Как реализовать такой список с номерами на Html и Css

Комментариев нет:

Отправить комментарий