如何在没有列表的情况下在HTML / CSS中实现此文本布局？

Question

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

很好奇如何在不使用列表的情况下在HTML / CSS 中实现所包含图像中的布局。原因是它是一份法律文件，点名点必须与纸质文件完全相同，即它们必须（a），它们不能 a）< / strong>或 a。我们无法100％信任浏览器以我们期望的方式呈现<ol type="a">。

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

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

有人有什么好主意吗？

Answer 1

更新：必须容纳大量文字（包装到保证金）。 将div用于自定义CSS，如计数器和：在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

Answer 2

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

<强> HTML

DECLARE @x XML ='
<Plan>
    <EffectiveDate>2006-01-01</EffectiveDate>
    <EffectiveDate>2016-09-14</EffectiveDate>
    <EffectiveDate>2016-09-14</EffectiveDate>
    <EffectiveDate>2016-09-14</EffectiveDate>
</Plan>';

DECLARE @DocHandle INT;
EXEC sp_XML_PrepareDocument @DocHandle OUTPUT, @x;

SELECT Min(a.EffDate) AS MinDate
, Count(a.EffDate) AS CountDate
FROM
(
SELECT *
FROM OPENXML(@DocHandle,'/Plan/EffectiveDate')
WITH (EffDate NVARCHAR(50) '.')
) a

EXEC sp_XML_RemoveDocument @DocHandle;

<强> CSS

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

Codepen

修改

没有列表的方法

<强> HTML

.alpha{
  list-style:lower-alpha;
}

<强> CSS

<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>

Codepen

Answer 3

像这样......

＆＃13;

＆＃13;

<p id="number">1.</p>
<p id="header">This is a fancy header.</p>
<p class="line">(a)<span class="spacer"></span>This is my first line</p>
<p class="line">(a)<span class="spacer"></span>This is my second line</p>
<p class="line">(a)<span class="spacer"></span>This is my third line</p>
<p class="line">(a)<span class="spacer"></span>This is my fourth line</p>
<p class="line">(a)<span class="spacer"></span>This is my fifth line</p>
<p class="line">(a)<span class="spacer"></span>This is my sixth line</p>

＆＃13;

var str = "<ol class="breadcrumb>
  <li>1</li>
  <li>2</li>
</ol>
<div>body</div>
<ol>
  <li>a</li>
</ol>"

＆＃13;

＆＃13;

＆＃13;