html - 在没有列表的情况下，如何在 HTML/CSS 中实现这种文本布局？

Question

编辑/道歉:忘记了必须在没有列表的情况下完成。

想知道如何在不使用列表的情况下用 HTML/CSS 实现包含图像中的布局。原因是它是法律文件，列表点必须与纸质文件完全相同，即它们必须是(a)，不能是a) 或 a. 我们不能 100% 信任浏览器来呈现 <ol type="a">我们期望的方式。

请注意，编号/字母点与段落文本的开头之间有不止一个空格，悬挂缩进的后面几行应与段落文本的左边缘对齐。

我可以使用   获得这种类型的布局强制间距，但我认为这是作弊。此外，一旦我们有两位数，就必须手动调整。

谁有什么好主意？

Answer 1

更新:必须容纳大量文本(换行到边距)。 将 div 与自定义 CSS 结合使用，例如计数器和 :before psuedo-element:

HTML

<div class="outer-list">
  <div>thing 1
  </div>
  <div>thing 2
  </div>
  <div class="inner-list">
    <div>subthing 2.1
    </div>
    <div>subthing 2.2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
      ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
      zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui
      facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus
      parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    </div>
    <div>subthing 2.3
    </div>
    <div>subthing 2.4
    </div>
    <div>subthing 2.5
    </div>
  </div>
  <div>thing 3
  </div>
  <div>thing 4
  </div>

</div>

CSS

更新:在 :before 元素上使用绝对定位将它们放在边距之外。

.outer-list {
  margin-left: 0;
  padding-left: 0;
  counter-reset: my-clever-counter;
}

.outer-list > div {
  margin-bottom: 1rem;
}

.outer-list > div:not(.inner-list):before {
  display: inline-block;
  margin-right: 1rem;
  content: counter(my-clever-counter);
  counter-increment: my-clever-counter;
}

.inner-list {
  margin-left: 0;
  padding-left: 0;
}

.inner-list > div {
  margin-left: 0rem;
  padding-left: 3rem;
}
.inner-list > div:before {
  margin:0;
  position:absolute;
  left:1.4rem;
}
.inner-list > div:nth-child(1):before {
  content: "(a)";
}

.inner-list > div:nth-child(2):before {
  content: "(b)";
}

.inner-list > div:nth-child(3):before {
  content: "(c)";
}

.inner-list > div:nth-child(4):before {
  content: "(d)";
}

.inner-list > div:nth-child(5):before {
  content: "(e)";
}

查看我更新的 CodePen example