8

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

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

1
  • 4
    Это называется Vertical Timeline
    – vp_arth
    8 фев 2017 в 9:19

2 ответа 2

6

Пример

* {
  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;
}
<ol>
  <li>Как реализовать такой список с номерами на Html и Css</li>
  <li>Как реализовать такой список с номерами на Html и Css</li>
  <li>Как реализовать такой список с номерами на Html и Css</li>
  <li>Как реализовать такой список с номерами на Html и Css</li>
  <li>Как реализовать такой список с номерами на Html и Css</li>
  <li>Как реализовать такой список с номерами на Html и Css</li>
  <li>Как реализовать такой список с номерами на Html и Css</li>
  <li>Как реализовать такой список с номерами на Html и Css</li>
</ol>

2
0

Нумерацию можно сгенерировать при помощи CSS свойств counter* Таким образом удастся отдельно стилизовать счетчик. Также придется отдельно стилизовать четные и нечетные элементы, но это уже при помощи :nth-child()

Все это поддерживается в текущих версиях браузеров

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.