以与放置列表项相同的方式放置：before-value？ [英] Placing the :before-value in the same way as a list-item is placed?

问题描述

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

  li { 
列表样式：无； 
} 
 
> ol {
 counter-reset：mainlist; 
} 
 
< ol> li {
 counter-reset：sublist; 
} 
 
< ol> li：之前{
反增量：mainlist; 
内容：counter（mainlist）。; 
} 
 
< ol> li> ol> li：之前{
反增量：子列表； 
内容：counter（mainlist）。计数器（子列表）； 
} 
  

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

  1.1 
这就是现在的样子
 
 
 1.1如果我添加内联
，这就是它的样子，下一行将从此处开始。 
 
 
 1.1我希望它看起来像这样。 
下一行从
开始，找到数字
  

我也尝试使用text-indent，但由于不同字母的宽度不同而无法使用。

解决方案

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

  body {width：200px;} li {list-style：none;} ol {counter-reset：mainlist;} ol> li {counter-reset：sublist;} ol&li; li：before {counter-increment：mainlist;内容：counter（mainlist）。;}< li> ol> li {显示：flex;} ol> li> ol&li; li：之前{counter-increment：sublist;内容：计数器（主列表）。计数器（子列表）； margin-right：5px;}  

 < ol> < li> aaaaaa< / li> < li&bb; bbbbbbb< ol> < li> aaaaaa aaaaaa aaaaaa< / li> < li> bbbbbbb bbbbbbb bbbbbbb< / li> < / ol> < / li>< / ol>  

如果希望这种行为出现在父级li上，您还需要在父级li上使用flex并进行一些HTML / CSS调整： lang = js data-hide = false data-console = true data-babel = false>

  body {width：200px;重置：主列表；计数器重置：sublist；} li {列表样式：无；} ol> li {display：flex; flex-wrap：wrap；} ol> li&span {flex：1；} ol> li> ol {flex：100％；} ol> li：{之前：反增量：主列表；内容：counter（mainlist）。;右边距：5px；} ol> li> ol&li; li {display：flex; flex-wrap：nowrap;} ol> & ol li：{之前：counter-increment：子列表；内容：计数器（主列表）。计数器（子列表）；右边距：5px；}  

 < ol> < li> span> aaaaaa< / span< / 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>  

I'm using counters to setup a special type of counting of lists, it's for a legal form.

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) " ";
}

This works fine, but I want the numbering to be to the left of the text column, not the way it looks now.

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

I tried using text-indent aswell, but it didn't work because the width of the different letters are different.

解决方案

An easy solution is to add display:flex to the li and you get this layout:

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>

And if you want this behavior to be on the parent li, you need to use flex on parent li also with some HTML/CSS adjustement:

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>

这篇关于以与放置列表项相同的方式放置：before-value？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！