Question

我有一个包含一些<code>段的HTML页面，我在外部CSS文件夹中为它们提供了这些属性：

code {

    background-color: f5f5ff;
    border-color : 7f7fbf;
    border-style : dashed;
    border-width : 1px;
    font-family  : courier new;
    margin-left  : 128px;
    padding      : 14px;
}

每当我在代码段中放置<br/>时，代码似乎跳到左边，忽略边距，填充覆盖最后一行，就像是一个全新的<code>段直接放在它下面，直到填充物结束的地方，没有左边距。

如何制作带有换行符的<code>细分，在单个“框”，换行符和所有代码中显示所有代码，直到<code>细分的末尾，就像它一样现在在我的帖子预览中显示在<code>段？

以下是我的<code>块/段之一的示例：

import math<br/>
def areaCircle(r)<br/>
return (math.pi * r) ^ 2

不幸的是，我无法提供图片，因为我是一个非常新的用户。

我在Chrome和FireFox中测试了这个;这两个浏览器的问题完全一样。

Answer 1

<pre>标记应该是您选择的标记，而不是<code>块，应该是内联的。

注意：<pre>阻止做关心空白，所以请确保不要包含额外的空格。

比较

<pre>
import math
def areaCircle(r)
return (math.pi * r) ^ 2
</pre>

要：

    <pre><!-- Extra whitespace generated -->
    import math
    def areaCircle(r)
    return (math.pi * r) ^ 2
    </pre>

Answer 2

您可以使用<pre>执行任务：http://jsfiddle.net/qSfGQ/5/

Answer 3

最好不要在<br />元素上添加white-space: pre并使用display: block和code。

code {
   display: block;
   white-space: pre;
}

jsFiddle

Answer 4

如果我正确理解您的问题，如果您只想显示具有正确换行符的代码段，则甚至不需要<br />标记。

HTML <br/>标记符<code> segments?</code>

4 个答案: