Question

使用自定义计数器时，我在第二行缩进时遇到问题..

我无法使用＆＃39; list-style-type：decimal＆＃39;因为它没有给出如下编号。

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;
}

这应该使文字远离柜台

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

2 个答案: