具有表格布局的CSS网格？

Question

我在使<ul>和<ol>在文本行中断时正常行为方面遇到问题。

我在stackoverflow上看到了一些答案，您可以在ul / ol上设置display: table，在li上设置table-row，在li :: before元素上设置table-cell。这就像我想要的那样但是限制了我，因此我无法在li上设置margin-bottom。

设置text-indent和否定margin也不会起作用，因为:: before元素的宽度会有所不同。例如，如果计数器变为两位数而不是单位数。

所以我的问题是，是否可以使用新的网格布局来解决这个问题？一点点修补，但我没有能够保持所有:: before元素的宽度相同而不设置固定的宽度。

任何人都有任何想法如何解决这个问题？

修改 内容是从CMS生成的，所以我限制使用他们的标记。这是一个带有li标签的常规ul / ol。

更新

我希望文本对齐，我的当前代码可以很好地处理无序列表

但是当处理有序列表时，它会变得更加复杂，因为作为我的项目符号和数字的::before元素可能会有所不同。例如

单个数字处理没问题但是当输入两位数时，数字最终会溢出文本。所以我希望所有::before元素具有相同的宽度，因此文本仍然正确对齐。在这种情况下，宽度应该等于最大的::before元素（数字10）

示例代码

ol {
  counter-reset: list;

  & li {
    position: relative;
    counter-increment: list;
    padding-left: 18px;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      margin-right: 8px;
      content: counter(list);
    }
  }
}

Answer 1

这是你需要的吗？如果是这样，你需要转移到LESS，因为这里运行得不好。

ol {
  counter-reset: list;
  list-style: none;
}
li {
    position: relative;
    counter-increment: list;
    padding-left: 18px;
}
li:before {
      position: absolute;
      top: 0;
      left: -1.5em;
      margin-right: 8px;
      content: counter(list);
      width: 2em;
      text-align: right;
}

<ol>
<li>Lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis condimentum massa.</li>
<li>Lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis condimentum massa.</li>
<li>Lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis condimentum massa.</li>
<li>Lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis condimentum massa.</li>
<li>Lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis condimentum massa.</li>
<li>Lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis condimentum massa.</li>
</ol>