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

Question

使用自定义计数器时，第二行缩进有问题..

我无法使用“list-style-type:decimal”，因为它没有给出如下编号。

1  first2  second   2.1 second.one ..... .. ..    But INDEDNT lost when spilled to second line   2.2 second.two3  Three

So I am using a custom counter, which gives me desired numbering, the issue is only with the 2nd line indent.

Please check my problem in 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>