是否有可能以某种方式使 <li> 标记中写入的文本位于标记的左侧？

Question

这是我在 whosebug.com 上的第一个问题，抱歉。我的问题是我无法将写在 <li> 标签中的文本放在标记的左侧。

.stages{
    list-style-type: none; 
    counter-reset: num;
    margin: 0 0 0 45px;
    padding: 15px;
    font-size: 12px;
}
.stages__working{
    position: relative; 
    margin: 0 ;
    padding: 8px 0 45px 20px;
    line-height: 1.4;
}
.stages__working::before {
    content: counter(num); 
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -23px;
    width: 30px;
    height: 30px;
    background: #95E1E1;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    border-radius: 50%;
}
.stages__working::after {
    content: "";
    position: absolute;
    left: -2%;
    background-color: #95E1E1;
    width: 5px;
    margin-top: 0;
    height: 85px;
    z-index: -1;
}

.end::after {
    display: none;
}

<ol class="stages">
    <li class="stages__working">Знакомство с клиентом, описание заказа</li>
    <li class="stages__working">Мы скидываем примеры своих работ, также ссылку на 
        инстаграм</li>
    <li class="stages__working">Отработка заказа, исходные данные от клиента и все это 
        отправляем дизайнеру</li>
    <li class="stages__working">Макет от дизайнера клиенту даем на утверждение, 
        обсуждаем детали рисунка, вносим изменения и корректировки.</li>
    <li class="stages__working">Подбор футболки, толстовки: цвет, размер, ткань, 
        производителя. Делаем замеры в случае необходимости.</li>
    <li class="stages__working">Макет готов, футболка тоже, запускаем в 
        производство</li>
    <li class="stages__working">Распечатываем рисунок на бумаге, выясняем место 
        расположения рисунка</li>
    <li class="stages__working">Заказ выполнен, упаковываем, кладем инструкцию, планер в 
        подарок</li>
    <li class="stages__working end">Доставка по индрайверу или самовывоз</li>
</ol>

必须按照照片做 enter image description here

我不知道如何实现它

提前致谢！

Answer 1

我为左右对齐添加了CSS，你必须使用“nth:child(odd) & nth:child(even)”使用这个你可以很容易地设置你的时间轴布局.

        .stages{
    list-style-type: none; 
    counter-reset: num;
    margin: 0 0 0 45px;
    padding: 15px;
    font-size: 12px;
}
.stages__working{
    position: relative; 
    margin: 0 ;
    padding: 8px 0 45px 20px;
    line-height: 1.4;
}
.stages__working::before {
    content: counter(num); 
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -23px;
    width: 30px;
    height: 30px;
    background: #95E1E1;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    border-radius: 50%;
}
.stages__working::after {
    content: "";
    position: absolute;
    left: -2%;
    background-color: #95E1E1;
    width: 5px;
    margin-top: 0;
    height: 100%;
    z-index: -1;
}

.end::after {
    display: none;
}

/*add this CSS*/


ol.stages {
    max-width: 500px;
    margin: 0 auto;
}

ol.stages li.stages__working {
    max-width: 185px;
    font-family: sans-serif;
}

ol.stages li.stages__working:nth-child(even) {
    margin: 0 0 0 auto;
}

ol.stages li.stages__working:nth-child(odd)::after {
    left: unset;
    right: -50px;
    top: 30px;
}

ol.stages li.stages__working:nth-child(odd)::before {
    left: unset;
    right: -62px;
}

ol.stages li.stages__working:nth-child(even)::after {
    right: unset;
    left: -45px;
    top: 0;
}

ol.stages li.stages__working:nth-child(even)::before {
    right: unset;
    left: -57px;
}

<ol class="stages">
    <li class="stages__working">Знакомство с клиентом, описание заказа</li>
    <li class="stages__working">Мы скидываем примеры своих работ, также ссылку на 
        инстаграм</li>
    <li class="stages__working">Отработка заказа, исходные данные от клиента и все это 
        отправляем дизайнеру</li>
    <li class="stages__working">Макет от дизайнера клиенту даем на утверждение, 
        обсуждаем детали рисунка, вносим изменения и корректировки.</li>
    <li class="stages__working">Подбор футболки, толстовки: цвет, размер, ткань, 
        производителя. Делаем замеры в случае необходимости.</li>
    <li class="stages__working">Макет готов, футболка тоже, запускаем в 
        производство</li>
    <li class="stages__working">Распечатываем рисунок на бумаге, выясняем место 
        расположения рисунка</li>
    <li class="stages__working">Заказ выполнен, упаковываем, кладем инструкцию, планер в 
        подарок</li>
    <li class="stages__working end">Доставка по индрайверу или самовывоз</li>
</ol>

Answer 2

使用 nth-child(odd) 你可以做到吗？
这是响应式的 ;)

.stages{
    list-style-type: none; 
    counter-reset: num;
    margin: 0 45px 0 50% ;
    padding: 15px;
    font-size: 12px;
    max-width:100%;
    position: relative;
}
.stages__working{
    position: relative; 
    margin: 0 ;
    padding: 8px 30px 45px 30px;
    line-height: 1.4;
    width:500px;
    max-width:100%;
}
.stages__working::before {
    content: counter(num); 
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -13px;
    width: 30px;
    height: 30px;
    background: #95E1E1;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    border-radius: 50%;
}
.stages__working::after {
    content: "";
    position: absolute;
    left: 0%;
    top: 0;
    background-color: #95E1E1;
    width: 5px;
    margin-top: 0;
    height: 100%;
    z-index: -1;
}
.stages__working:nth-child(odd){
  text-align: right;
  transform: translateX(-100%);
}
.stages__working:nth-child(odd):after{
  left: 100%;
}

.stages__working:nth-child(odd):before{
  left: calc(100% - 13px);
}
.end::after {
    display: none;
}

<ol class="stages">
    <li class="stages__working">Знакомство с клиентом, описание заказа</li>
    <li class="stages__working">Мы скидываем примеры своих работ, также ссылку на 
        инстаграм</li>
    <li class="stages__working">Отработка заказа, исходные данные от клиента и все это 
        отправляем дизайнеру</li>
    <li class="stages__working">Макет от дизайнера клиенту даем на утверждение, 
        обсуждаем детали рисунка, вносим изменения и корректировки.</li>
    <li class="stages__working">Подбор футболки, толстовки: цвет, размер, ткань, 
        производителя. Делаем замеры в случае необходимости.</li>
    <li class="stages__working">Макет готов, футболка тоже, запускаем в 
        производство</li>
    <li class="stages__working">Распечатываем рисунок на бумаге, выясняем место 
        расположения рисунка</li>
    <li class="stages__working">Заказ выполнен, упаковываем, кладем инструкцию, планер в 
        подарок</li>
    <li class="stages__working end">Доставка по индрайверу или самовывоз</li>
</ol>

是否有可能以某种方式使 <li> 标记中写入的文本位于标记的左侧？

Is it possible to somehow make the text that is written in the <li> tag to the left of the markers?

html

css

html-lists