Как разделить на два столбца упорядоченный список с упорядоченным списком и сохранить счетчик?

Question

Я создаю шаблон PDF с dompdf (laravel), который требует 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

вы можете использовать flex и разделить ваш список из списка 2 ol. 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>

Answer 2

Хорошо, здесь вы можете попробовать разбить на два столбца упорядоченный список с упорядоченным списком и сохранить счетчик в начальном стиле.