css - 放置 :before-value in the same way as a list-item is placed?

Question

我正在使用计数器来设置一种特殊类型的列表计数，这是一种合法形式。

li{
    list-style: none;
}

>ol {
    counter-reset: mainlist;
}

>ol>li{
    counter-reset: sublist;
}

>ol>li:before{
    counter-increment: mainlist;
    content: counter(mainlist) ". ";
}

>ol>li>ol>li:before{
    counter-increment: sublist;
    content: counter(mainlist) "." counter(sublist) " ";
}

这很好用，但我希望编号位于文本列的左侧，而不是现在的样子。

1.1
this is how it looks now


1.1 this is how it looks if I add inline
next row will start here.


1.1 I want it to look this.
    the next row starts here 
    and it's a lot easier to find the numbers

我也试过使用文本缩进，但没用，因为不同字母的宽度不同。

Answer 1

一个简单的解决方案是将 display:flex 添加到 li 中，您将获得以下布局:

body {
  width: 200px;
}

li {
  list-style: none;
}

ol {
  counter-reset: mainlist;
}

ol>li {
  counter-reset: sublist;
}

ol>li:before {
  counter-increment: mainlist;
  content: counter(mainlist) ". ";
}

ol>li>ol>li {
  display: flex;
}

ol>li>ol>li:before {
  counter-increment: sublist;
  content: counter(mainlist) "." counter(sublist) " ";
  margin-right:5px;
}

<ol>
  <li>aaaaaa</li>
  <li>bbbbbbb 
    <ol>
      <li>aaaaaa aaaaaa aaaaaa </li>
      <li>bbbbbbb bbbbbbb bbbbbbb</li>
    </ol>
  </li>
</ol>

如果你希望这种行为发生在父 li 上，你还需要在父 li 上使用 flex 并进行一些 HTML/CSS 调整:

body {
  width: 200px;
  counter-reset: mainlist;
  counter-reset: sublist;
}

li {
  list-style: none;
}

ol>li {
  display: flex;
  flex-wrap: wrap;
}

ol>li>span {
  flex: 1;
}

ol>li>ol {
  flex: 100%;
}

ol > li:before {
  counter-increment: mainlist;
  content: counter(mainlist) ". ";
  margin-right: 5px;
}

ol>li>ol>li {
  display: flex;
  flex-wrap: nowrap;
}

ol > li > ol > li:before {
  counter-increment: sublist;
  content: counter(mainlist) "." counter(sublist) " ";
  margin-right: 5px;
}

<ol>
  <li><span>aaaaaa</span></li>
  <li><span>bbbbbbb bbbbbbb bbbbbbb</span>
    <ol>
      <li>aaaaaa aaaaaa aaaaaa </li>
      <li>bbbbbbb bbbbbbb bbbbbbb</li>
    </ol>
  </li>
  <li><span>bbbbbbb bbbbbbb bbbbbbb</span>
</ol>