如何格式化`pre`以便它可以像文本区域中的图片一样？

Question

要在我的div区域显示代码，我使用了<pre class="prettyprint linenums:0" > code </pre>语句。但是，显示的代码不像我预期的那样。我希望它有自己的块像图片和文字继续像;

Sunday, ...
 ______
| code |  However, George should ...
|      |  ...
|______|  ...
At the same time, in the ....

然而，我有所喜欢;

Sunday, ...
 _________________________
| code                   |
|                        |
|________________________|
However, George should ...
...
...
At the same time, in the ....

如何格式化pre以便它可以像文字区域中的图片一样？

Answer 1

您的问题是您希望<pre>元素的行为类似于内联元素，而不是块元素。要更改此设置，您需要将display的{​​{1}}属性设置为<pre>。

所以，你可以尝试：

inline

或者，更好的是，使用外部CSS样式表来避免混合CSS和HTML。