Question

我不知道如何在html的第二行用我的按钮制作文本缩进。我尝试提供硬编码的空格，但在我的HTML文档中，它们显示为灰色字段。

<capitation>
<span style="font-weight: bold; font-size: 12px;">xxx</span>
<span style="font-size: 12px;">YYYY</span> 
<span style="font-weight: bold;font-size: 12px;">YYYYY</span> 
<span style="font-size: 12px">YYYYY</span>
<br>
<span style="font-size: 12px "> XXXXXX</span> 
<span style="font-weight: bold;font-size: 12px;"> xxxxxxxx</span> 
<span style="font-size: 12px;">XXXXXXX</span>  
<br>
<br>
</capitation>

它显示为

XXXX! YYYY
ZZZZ

我想要

XXXXX! YYYYYY
       ZZZZZZ

Answer 1

您可以使用margin-left：

<span style="font-size: 12px; margin-left: 5em;">ZZZZZ</span>

注意：如果您想要相同的字体大小，请将span元素包装在div中：

<div style="font-size: 12px;"><span ...></div>

因为div的孩子继承了它的风格。

Answer 2

这段代码有点勉强。

各地的内联CSS等等。这不是我写它的方式。但你可以使用padding-left。

的jsfiddle： http://jsfiddle.net/ev88su57/1/

<capitation>
<span class="bold">xxx</span>
<span>YYYY</span> 
<span class="bold">YYYYY</span> 
<span>YYYYY</span>
<br>

<span class="indent"> XXXXXX</span> 
<span class="bold"> xxxxxxxx</span> 
<span>XXXXXXX</span>  
<br>
</capitation>

CSS：

.indent { text-indent:-2em;margin-left:2em;  }

capitation span  {font-size:.8em;}
.bold { font-weight:bold; }

Answer 3

我解决了它

在开始时和新行之后的标签

<capitation>
<span class="bold">&#09;xxx</span>
<span>YYYY</span> 
<span class="bold">YYYYY</span> 
<span>YYYYY</span>
<br>

<span class="indent">&#09; XXXXXX</span> 
<span class="bold"> xxxxxxxx</span> 
<span>XXXXXXX</span>  
<br>
</capitation>

如何在HTML中的二行标题中进行文本缩进

3 个答案: