html - 如何将 `div`放在 `li`所在的同一行？

Question

div {
  margin: 0px;
  padding: 0px;
  min-height: 1em;
}

.row {
  display: flex;
  flex-direction: row;
  border-style: solid;
  border-width: 1px;
  border-color: green;
}

.column1 {
  width: 30%;
  border-right-style: solid;
  border-width: 1px;
  border-color: green;
}

.column2 {
  width: 70%;
}

<ol>
  <li>
    <div class="row">
      <div class="column1"></div>
      <div class="column2"></div>
    </div>
  </li>
  <li>
    <div>
      <span></span>
    </div>
  </li>
</ol>

在那个例子中，我的 div 元素位于下一行:

但我需要它们位于 li 号码所在的同一行。 IE。我需要这样的结果:

我怎样才能得到我需要的结果？

Answer 1

无需使用列表:

.row {
  display: table;
  border-collapse: collapse;
  margin-bottom: 1em;
  counter-increment: myIndex;
}

.row:before {
  content: counter(myIndex) ".\00A0";
}

.row div {
  display: table-cell;
  border: 1px solid green;
}

.column1 {
  width: 30%;
}

.column2 {
  width: 70%;
}

<div class="row">
  <div class="column1"></div>
  <div class="column2"></div>
</div>

<div class="row">
  <div class="column1"></div>
  <div class="column2"></div>
</div>