HTML段落，嵌入式跨度混乱

Question

我正在试图弄清楚为什么下面这段代码没有达到我预期的效果，每一段文字（文字＃1，x，文字＃2）都显示在它自己的行上，并且'x'略微缩进。关于我哪里出错的任何见解？

  <p>TEXT #1
    <br /> <span style="text-indent: 2em;">x</span>
    <br />TEXT #2
  </p>

Answer 1

如果您想使用span，则默认为inline 您必须将范围显示更改为display: inline-block;

  <p>TEXT #1
    <br /> <span style="text-indent: 2em; display: inline-block;">x</span>
    <br />TEXT #2
  </p>

Answer 2

请改为尝试：

<p>
    TEXT #1<br>
    <span style="padding-left: 2em;">x</span><br>
    TEXT #2
</p>

<br>也是执行换行标记的正确（HTML5）方式。