CSS：内联a标签中的<pre>标签

Question

这是我的HTML代码：

<p>The following text <pre>is an inline preformat block</pre> and will not be parsed.</p>

我希望它作为单行呈现，其中包含一个预格式块，但是它会作为三个单独的行呈现：

---

以下文本

是内联预格式块

并且不会被解析。

---

我想要的是所有内容都在同一行上。我尝试将样式设置为display:inline，但这只解决了我的问题的一半：在预格式块的末尾没有换行符，但在开头仍然有一个换行符。

正如其他地方建议的那样，我尝试使用white-space:nowrap，但它完全没有任何作用。

请不要基于JavaScript或jQuery提供解决方案。我想确保解决方案适用于禁用脚本的浏览器。

- Zauberin Stardreamer

---

使用<span>标签（或其他内联元素）并适当地设置样式。由于在<p>元素中嵌套<pre>元素（块级元素）是无效的HTML格式。 - DocRoot

Answer 1

解决方案1使用<pre>（不建议）：
您可以使用以下代码，但是<p>元素会有一点问题。如果您想避免影响所有的<p>元素，请为<p>元素添加class或id属性。

pre, p {
  display:inline;
}

<p>The following text <pre>is an inline preformat block</pre> and will not be parsed.</p>

使用 <code> 的解决方案 #2：
更好的解决方案是将 <pre> 替换为 <code>。输出结果与使用 <pre> 元素的解决方案相同。

<p>The following text <code>is an inline preformat block</code> and will not be parsed.</p>

方案三：使用<span>标签：
如果你想自己定义元素，可以使用以下方法：

p span {
  font-family:monospace;
}

<p>The following text <span>is an inline preformat block</span> and will not be parsed.</p>

- Sebastian Brosch

Answer 2

你不能只使用标签，然后用CSS设计它吗？

<p>The following text <span>is an inline preformat block</span> and will not be parsed.</p>

- Alexander Klug Gudmundsson

Answer 3

你可以使用<code>标签。请参见w3c。

- denns