Question

我想在缩进中写几行文本（仅限HTML），如下例所示：HERE

以下是我的尝试：

<p><code>"Knowing is not enough. We</code></p>
<p><blockquote><code>must apply. Willing is not</code></blockquote></p>
<p><blockquote><pre><code>enough. We must do."</code></pre></blockquote></p>

它不起作用。接下来的两行不会与示例类似地缩进。

有人可以在这里指出我的错误吗？

另外，我想知道如何使这三条线之间的空间没有那么大的间隙？或者它取决于使用的文本类型？（就像，如果你看到这里，我使用了文本的标签。）

提前致谢！

Answer 1

你可以抛弃pre和其他块的quots并使用样式来定义缩进，然后标记你的行缩进级别。例如：

<div>"Knowing is not enough, we</div>
<div style="text-indent:30px;">must apply. Willing is not</div>
<div style="text-indent:70px;">enough, we must do."</div>

Answer 2

缩进确实属于样式，因为它的呈现而非HTML应该代表的语义。

但是，仅使用html执行此操作时，只需考虑使用break和nbsp标记

<p>
"Knowing is not enough, we<br>
&nbsp;&nbsp;must apply. Willing is not<br>
&nbsp;&nbsp;&nbsp;&nbsp;enough, we must do."</p>

只需增加nbsp标签的数量即可调整间距。

Answer 3

如果您想要在问题中链接的图像中使用等宽字体显示，最简单的方法是仅使用pre元素：

<pre>
“Knowing is not enough. We 
              must apply. Willing is not
                    enough. We must do.”
</pre>

结果：

“Knowing is not enough. We 
              must apply. Willing is not
                    enough. We must do.”

但是，通常可以更灵活地将每一行包装在div元素中，并使用CSS为margin-left设置缩进。这允许您使用可变宽度字体。然后，您需要为缩进选择合适的单位，例如em或（有更多有限的浏览器支持）ch。

Answer 4

您可以将第一行左对齐，另外两行右对齐。

要使诗不占据页面的整个宽度，可以在元素上添加宽度限制（请在问题的文本中澄清这些内容。）

示例：http://jsfiddle.net/hhh87/4/

<div style="text-align: right; min-width:300px; max-width: 40%;">
    <div style="text-align: left;">"Knowing is not enough, we</div>
    <div>must apply. Willing is not</div>
    <div>enough, we must do."</div>
</div>

CSS替代

当然，理想情况下，您会使用CSS文件而不是内联样式。
然后你也可以更一般地设计它：

HTML：

<div class="poem">
    <div>"Knowing is not enough, we</div>
    <div>must apply. Willing is not</div>
    <div>enough, we must do."</div>
</div>

CSS：

.poem > * {
    text-align: right;
    min-width: 300px;
    width: 40%;
}
.poem > *:first-child {
    text-align: left;
}

使用blockquotes，pre或dd标签在html中创建类似诗歌的行缩进？

4 个答案:

CSS替代