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) 方式。

HTML paragraph, embedded span confusion