Question

我的HTML / CSS任务看起来很简单：我需要一个数字（可变长度）在多行段落之前，文本应该有一个缩进，所以第二行从与第一行相同的位置开始：

1. This is text in
   two lines

10. This is another
    text in two lines

如果我知道必要的缩进，使用CSS将是一项简单的任务：

<p style="padding-left: 14px; text-indent: -14px">1. This is text in two lines</p>

然而，我现在知道了，我的目标是动态缩进（不使用JavaScript）。原因是：段落在不同的网页上，第1页上有很多空间并不是很漂亮。

一种可能的解决方案是表格构造（通过<table>或CSS-tabled DIV），但每个段落的一个表构造可能超大。

另一个可能的解决方案是数字的浮动DIV ......但我不知道文本的高度。

<div style="float: left; width: 1px; height: ?; overflow: visible">1.</div>
This is text in two lines

因此，我正在寻找一种更优雅的解决方案来解决这个问题，使用HTML和CSS。谢谢你的想法！

BurninLeo

Answer 1

此处示例：jsfiddle

<!-- html -->
<div style="float: left">1.</div>
<p>Phasellus lacinia ipsum quis dolor faucibus interdum.</p>

/* css */
p {overflow: hidden}

Answer 2

尝试使用

 <ol>
    <li>
      This is text is<br>
      In two lines
    </li>
 </ol>

实施例：