我如何将有序列表和子有序列表分成两列并保持计数器？

Question

我正在使用dompdf（laravel）构建一个pdf模板，该模板需要一个在内部和两列中包含ol的ol，我已经尝试了有关两列ol和make sub ol的一些答案，但是当我将它们放在一起时混沌。我的代码是这样的：

<ol>
  <li>item 1</li> //column 1
  <li>item 2</li> //column 1
  <li>item 3      //column 1
    <ol>          //column 2 needs to start in 3.1
      <li>item 3.1</li> //column 2
      <li>item 3.2</li> //column 2
    </ol>
  </li>
  </ol>

我已经尝试了很多，这里是我的代码：

.column {
  float: left;
  width: 50%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

ol.normal {
  counter-reset: item;
}

ol.normal>li {
  display: block
}

ol.normal>li:before,
ol.reset>li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<div class="row fs-small">
  <div class="column">
    <ol class="normal fs-small" type="1">
      <li value="1">
        <span class="fs-small bold">xxx</span>
        <ol class="normal" type="1">
          <li>
            <span>xxx</span>
          </li>
          <li>
            <span>xxx</span>
          </li>
        </ol>
      </li>
      <li>
        <span class="fs-small bold">xxx</span>
        <ol class="normal">
          <li>
            <span>xxx</span>
          </li>
        </ol>
      </li>
      <li>
        <span class="fs-small bold">xxxx</span>
      </li>
    </ol>
  </div>
  <div class="column">
    <ol class="normal">
      <li>
        <ol class="normal">
          <li>
            <span>xxx</span>
          </li>
          <li>
            <span>xxx<span>
                        </li>
                        <li>
                            <span>xxx</span>
          </li>
          <li>
            <span>
                            xxx
                        </span>
          </li>
          <li>
            <span>
                            xxx
                        </span>
          </li>
          <li>
            <span>xxx
                        </span>
          </li>
        </ol>
      </li>
    </ol>
  </div>
</div>

Answer 1

好的，您可以尝试将有序列表与子有序列表分成两列，并保持计数器使用开始样式。

Answer 2

您可以使用flex并从2 ol list中拆分您的列表。 counter-css方便使用，并且无需使用类就可以简化，仅从树级别即可：

可能的例子

  div {
  counter-reset: olfirst olbis;
  display: flex;
}

div>ol {
  flex: 1;
}

div ol li {
  list-style-type: none;
}

div>ol>li:before {
  counter-increment: olfirst;
}

li:before {
  content: counter(olfirst);
  float: left;
  color: tomato;
}

ol li ol li:first-of-type {
  counter-reset: olbis;
}

li li:before {
  counter-increment: olbis;
  content: counter(olfirst)'.' counter(olbis) ' ';
  padding-right: 1em;
  color: green
}

ol ol {
  margin-bottom: 1em;
  padding-left: 1em;

<div>
  <ol>
    <li>
      <ol>
        <li>XXX</li>
        <li>XXX</li>
        <li>XXX</li>
        <li>XXX</li>
      </ol>
    </li>
    <li>
      <ol>
        <li>XXX</li>
        <li>XXX</li>
      </ol>
    </li>
    <li>
      <ol>
        <li>XXX</li>
        <li>XXX</li>
        <li>XXX</li>
      </ol>
    </li>
  </ol>
  <ol>
    <li>
      <ol>
        <li>XXX</li>
        <li>XXX</li>
        <li>XXX</li>
      </ol>
    </li>
  </ol>