2

我已经订购了具有反增量属性的列表。如果长文本分成多行，如何使长文本与第一行的左侧偏移量相同？现在第二行显示在数字下方。

这是小提琴（查看 2.3 项）：http: //jsfiddle.net/1vh1tt81/1/

我能够在“li：before”元素上使用“position：absolute”来达到预期的结果，但这会导致我的项目特有的其他问题，所以这对我来说不是一个好的解决方案。

有一个类似的问题，但在标记中有一个附加标签，而我不能有任何附加标签： https ://jsfiddle.net/rkmv3rn3/10/

4

3 回答 3

2

内部使用table的布局ol和单元格排列得很好——猜猜这对你有用：

li > ol > li{ 
  display: table;
}

li > ol > li:before { 
  content: counters(item, ".") ". "; 
  counter-increment: item ;
  display: table-cell;
}

下面的片段：

ol {
  counter-reset: item;
  display: table;
}
li {
  display: block;
}
li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
}
li > ol > li {
  display: table-row;
}
li > ol > li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
  display: table-cell;
}
<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text
        long tex long text long tex long text long tex</li>
    </ol>
  </li>

</ol>

于 2016-09-02T12:05:12.930 回答
1

我通常通过给计数器一个固定的宽度和一个相同值的负边距来解决这个问题，然后在 LI 上使用相同的 padding-left：

li { 
  display: block;
  padding-left: 1.75em;
}

li:before { 
  content: counters(item, ".") ". "; 
  counter-increment: item;
  display:inline-block;
  width: 1.75em;
  margin-left: -1.75em;
}

http://jsfiddle.net/1vh1tt81/2/

（如果项目的缩进对于你现在在这个小提琴中的口味来说太多了，那么你可能想要覆盖 OL 和 LI 元素的其余默认边距/填充。）

如果没有固定宽度，这将更难实现，并且可能需要为 LI 内容添加额外的容器元素。
通过相对于 LI 绝对定位它们，使计数器元素脱离正常流动，可能是实现类似效果的另一种选择。

于 2016-09-02T11:44:19.347 回答
0

如果您的项目允许使用flex，那么您可以使用这样的东西

ol {
  counter-reset: item;
  display: block;
  padding: 0;
  margin: 0;
  flex: 1;
}

body>ol:first-child::before {
  display: block;
}

ol::before {
  display: inline-flex;
  content: '';
}

li {
  display: flex;
}

li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}
<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text
        long tex long text long tex long text long tex </li>
      <li>
        hello hello hello hello hello
        <ol>
          <li>two.one</li>
          <li>two.two</li>
          <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long
            text long tex long text long tex long text long tex </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text
        long tex long text long tex long text long tex </li>
      <li>
        hello
        <ol>
          <li>two.one</li>
          <li>two.two</li>
          <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long
            text long tex long text long tex long text long tex </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

于 2021-06-08T08:51:39.983 回答