列表样式 - 使用计数器时第二行缩进

Question

我使用自定义计数器，当有在第二行缩进一个问题..

因为它没有给出如下编号：我不能使用“十进制列表样式类型”。

1  first
2  second
   2.1 second.one ..... .. .. 
   But INDEDNT lost when spilled to second line
   2.2 second.two
3  Three

所以我用一个自定义的计数器，这给了我想要的编号，这个问题只与第二行缩进。

请检查我在PEN here问题

  ol {
    counter-reset: ci-counter;
    list-style-postion: inside;
    list-style-type: none;
    padding-left: 0px;
    margin-top: 0;
    margin-bottom: 11px;
  }

  ol li:before {
    content: counters(ci-counter, ".")"  ";
    counter-increment: ci-counter;
  }

Answer 1

编辑你的HTML这样的

.img-cntr {
    padding: 0;
    margin: 0 10px 10px 0;
    float:left;
}

ol {
    counter-reset: ci-counter;
    list-style-postion:inside;
    list-style-type: none;
    padding-left: 0px;
    margin-top: 0;
    margin-bottom: 11px;
}

ol li:before {
  content: counters(ci-counter, ".") "  ";
  counter-increment: ci-counter;
}

<div class="cntr" style="width:40%">
      <div class="img-cntr">
        <image src="http://www.hdwallpapery.com/static/images/image5_170127819_PxgeF3V.jpg" height="200px"/>
      </div>
      
      <ol>
      <li>On average every day, across the organisation</li>
      <li>we spend at hours a day on the phone
        <ol><li>test</li></ol>
      </li>
      <li>to the IT Service Desk, with average wait times per</li>
     </ol>
      
    </div>

Answer 2

ul li{
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

这应该从柜台移开文本