如何在带有列表项的子元素的html / css有序列表中使自适应的项目号?

问题描述 投票:0回答:1

目标

  1. 允许按:before伪元素样式自定义排序列表(不可能使用AFAIK任意形状)。>>
  2. [容器内容物边缘(即使在左侧填充为0时也带有边框)与项目编号(指定为l)之间的间距以及编号与项目(指定为m)之间的间距也必须是可调的。
  3. 由于位数增加,带有的商品编号必须是自适应的。
  4. enter image description here

  1. [li可以具有子块元素,例如divpfigure
  2. enter image description here

问题

下面没有定位的解决方案满足前三个要求。

ol {
  counter-reset: section;
}
ol li:before {
  content: "";
  display: inline-block;
  counter-increment: section;
  content: counters(section, ".") " ";
  margin-left: 4px;
  margin-right: 10px;
  padding: 4px 6px;
  background: lightblue;
  border: 1px solid skyblue;
  border-radius: 4px;
}
ol + li {
  margin-top: 6px;
}

🌎 Fiddle

enter image description here

但是第四个要求呢?让我们尝试将子元素添加到li

<ol>
  <li>Alpha</li>
  <li>
    <ol>
      <li>
        <p>Lorem ipsum</p>
        <p>Duis aute</p>
      </li>
    </ol>
  </li>
</ol>

enter image description here

从概念上讲,:before伪元素必须占据一列(其下的空格必须为空,直到下一个li)。目前,我只知道一种解决方案:定位。

ol {
  counter-reset: section;
}
ol li {
  position: relative;
}
ol li:before {
  position: absolute;
  left: 0;
  counter-increment: section;
  content: counters(section, ".") " ";
  display: inline-block;
  padding: 4px 6px;
  background: lightblue;
  border: 1px solid skyblue;
  border-radius: 4px;
}
ol li + li {
  margin-top: 12px;
}
ol li > li {
  padding-left: 30px;
}
ol li > li > ol > li {
  padding-left: 44px;
}

Fillde 🌎

除了丑陋,此解决方案仅达到第一个和第四个目标:

  • 第二目标我们再也无法控制lm:我们只能控制总间距l + m + o
  • 第三目标
  • 没有适应性:l + m + o仅对于初始数字计数才是实际的。

    对于远距目标,需要垂直间距调整,但是不太难。

您能否提出一些替代解决方案? CSS的灵活性到此结束吗?

Targets在允许伪元素样式设置之前,将有序列表按::自定义(不可能是AFAIK任意形状)。容器内容边缘之间的间距(即使在左侧填充为...时也带有边框)

html css
1个回答
0
投票

这里是使用CSS网格的想法,在这里我将对初始代码进行一些调整:

© www.soinside.com 2019 - 2024. All rights reserved.