HTML 遵循行缩进对齐

Question

我正在将内容添加到我无法修改但允许任何 HTML 的预定义布局。我希望将一段文本对齐为浮动文本框，但由于 h4 和 p 类我无法更改它，这被证明是困难的。

我想看到的是：

但目前看起来像：

结果 HTML 目前是：

<div class="element property-line"><h4 class="property-name">Foo</h4>
<p class="p property-text">
    BAR <div style="line-height: 90%;";>
    <i> quite a long but of text that needs to wrap</i></div>
<p></p></div>

...我的内容从 BAR 开始，以 i 和 div 结束 结束标记。

我想我可能缺少格式化技巧。

Answer 1

<div class="element property-line">
    <h4 class="property-name">Foo</h4>
    <p class="p property-text">
        BAR 
        <span style="line-height: 90%;">
             <i> quite a long but of text that needs to wrap</i>
        </span>
    </p>
</div>

这应该是您想要的更多内容，<span> 标签适用于段落中的 changing/styling 文本，因为 <div> 标签更适合结构元素。

您的原始代码在最后一行还有一个额外的空缺 <p>。

Answer 2

我使用 MS Word 创建了一个我希望它出现的文档，然后删除了它放入的所有多余的废话；留给我：

<p style="margin-left:50pt; text-indent:-50pt">

然后找到了一种变通方法来模仿 <h4 class= 和 <p class= 部分，以便它们全部适合一个 <div>。

HTML 遵循行缩进对齐

HTML follow on line indent alignment

html

text-alignment