如何在没有列表的HTML/CSS中实现这种文本布局？

编辑/道歉：忘记必须在没有列表的情况下完成。 想知道你如何在不使用列表的情况下实现HTML/CSS中包含图像的布局。原因是它是一份法律文件，列表点必须与纸质文件完全相同，即它们必须是（a），它们不能是a）或a。我们不能100%信任浏览器以我们期望的方式呈现

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

我可以使用

强制间距来获得这种类型的布局，但我认为这是欺骗。而且，一旦我们有了两位数字，就必须手动调整

---

有人有什么好主意吗？

只需使用嵌套列表并根据需要调整填充

HTML

<ol>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  <ol class="alpha">
    <li>asdasd</li>
  </ol>
</ol>

<div class="intro">
  <p><span class="num">1.</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <div class="sub-intro">
    <p><span class="alpha">(a)</span>simply dummy text of the printing and typesetimply dummy text of the printing and typesetting industryimply dummy text of the printing and typesetting industryting industry</p>
    <p><span class="alpha">(b)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industry</p>
    <p><span class="alpha">(c)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industryimply dummy text of the printing and typesetting industry</p>
    <p><span class="alpha">(d)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industry</p>
  </div>
</div>

编辑

一种没有列表的方法

HTML

<ol>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  <ol class="alpha">
    <li>asdasd</li>
  </ol>
</ol>

<div class="intro">
  <p><span class="num">1.</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <div class="sub-intro">
    <p><span class="alpha">(a)</span>simply dummy text of the printing and typesetimply dummy text of the printing and typesetting industryimply dummy text of the printing and typesetting industryting industry</p>
    <p><span class="alpha">(b)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industry</p>
    <p><span class="alpha">(c)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industryimply dummy text of the printing and typesetting industry</p>
    <p><span class="alpha">(d)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industry</p>
  </div>
</div>

---

只需使用嵌套列表，并根据需要调整填充

HTML

<ol>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  <ol class="alpha">
    <li>asdasd</li>
  </ol>
</ol>

<div class="intro">
  <p><span class="num">1.</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <div class="sub-intro">
    <p><span class="alpha">(a)</span>simply dummy text of the printing and typesetimply dummy text of the printing and typesetting industryimply dummy text of the printing and typesetting industryting industry</p>
    <p><span class="alpha">(b)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industry</p>
    <p><span class="alpha">(c)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industryimply dummy text of the printing and typesetting industry</p>
    <p><span class="alpha">(d)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industry</p>
  </div>
</div>

编辑

一种没有列表的方法

HTML

<ol>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  <ol class="alpha">
    <li>asdasd</li>
  </ol>
</ol>

<div class="intro">
  <p><span class="num">1.</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <div class="sub-intro">
    <p><span class="alpha">(a)</span>simply dummy text of the printing and typesetimply dummy text of the printing and typesetting industryimply dummy text of the printing and typesetting industryting industry</p>
    <p><span class="alpha">(b)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industry</p>
    <p><span class="alpha">(c)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industryimply dummy text of the printing and typesetting industry</p>
    <p><span class="alpha">(d)</span>simply dummy text of the printing and typesetting industry imply dummy text of the printing and typesetting industry</p>
  </div>
</div>

像这样的事情

#编号{
显示：内联块；
宽度：25px；
}
#标题{
显示：内联块；
}
.线路{
左边距：30px；
}
.垫片{
左侧填充：15px；
}

1
这是一个奇特的标题
这是我的第一行

这是我的第二行

这是我的第三行

这是我的第四行

这是我的第五行

（a）这是我的第六行


#编号{
显示：内联块；
宽度：25px；
}
#标题{
显示：内联块；
}
.线路{
左边距：30px；
}
.垫片{
左侧填充：15px；
}
1
这是一个奇特的标题
这是我的第一行

这是我的第二行

这是我的第三行

这是我的第四行

这是我的第五行

（a）这是我的第六行
更新：必须容纳大量文本（换行到页边）。
将div与自定义CSS类似的计数器和：before psuedo元素一起使用：

HTML
请参阅我的更新版
更新版：必须容纳大量文本（换行至页边）。
将div与自定义CSS类似的计数器和：before psuedo元素一起使用：

HTML
请参阅我的更新版
请参阅道歉：需要不使用列表。您好，谢谢，但是它在子内容中较长的行上未通过测试，在第二行或后续行上正确包装。例如，如果您将
子项2.1
扩展为200个单词长。更新示例以容纳200多个单词请参见道歉：需要不使用列表。您好，谢谢，但是它在子项中较长的行上未通过测试，在第二行或后续行上正确包装。例如，如果您将
子项2.1
扩展为200个单词长。更新示例以容纳200多个单词的文本请参见道歉：需要不使用列表。此处没有列表！在评论之前先看一下代码；）请参阅道歉：需要不使用列表。此处没有列表！在评论之前先看一下代码；）请参阅道歉：需要不使用列表。@AmbroseChapel更新请参阅道歉：需要不使用列表。@AmbroseChapel更新