css 文本段落对齐

Question

我也想在第二行的第一行开始的文本中显示文本，但它在数字下方的左侧，请帮助

1 文本行段落和和
和 和 和 和
2 文本行段落和和
和 和 和 和
3 文本行段落和和
和 和 和 和

注意：不使用列表类，我希望这种类型的显示文本带有css，请帮助。

Answer 1

我假设你的意思是，对于由编号项目组成的文本，其中数字是内容的一部分，每个项目都应该从新行开始，项目的第二行和后续行应该左对齐到第一行的文本本身（在数字、句点和空格之后）开始的同一点。我还假设"不使用列表类"意味着出于某种原因，不得使用编号列表的元素 ol 。

最

简单（也是最可靠）的解决方案是使用表。例：

<style>
table.list { border-collapse: collapse; }
table.list td { padding: 0; vertical-align: top; }
table.list td:first-child { text-align: right; padding-right: 0.25em; }
</style>
<table class=list>
<tr><td>1.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
<tr><td>2.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
<tr><td>3.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
</table>

如果你需要避免使用table标记，那么你需要以某种方式模拟它，例如使用div和span标记和CSS表格格式（display: table等） - 适用于现代浏览器，但不适用于旧版本的IE。

现场演示

Answer 2

如果这只是您所追求的缩进，您可以这样做：

p {
  padding-left: 1em;
  text-indent: -0.75em;
}

根据字体的不同，您可能需要稍微调整text-indent值。

http://jsfiddle.net/h7KvC/

Answer 3

在 css 中使用文本缩进和清除，希望它能解决您的问题。

Answer 4

从中做一个OL。

<ol>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ol>

结果：

1. 文本行段落和
   和 和
2. 文本行段落和
   和 和
3. 文本行段落和
   和 和

Answer 5

您可以通过以下方式将段落制作成列表项：

.HTML

<div class="list">
  <p>Paragraph one</p>
  <p>Paragraph two</p>
  <p>Paragraph three</p>
</div>

.CSS

.list {
  counter-reset: pcount;
}
.list p:before {
  counter-increment: pcount;
  content: counter(pcount, decimal) ' ';
}

结果

1 Paragraph one
2 Paragraph two
3 Paragraph three

http://jsfiddle.net/bQWau/1/