Question

我要做的是创建一个看起来像bash终端的<pre>标签 - 黑色背景和白色字母，单声道间隔字体。

＆＃13;

pre.bash {
  background-color: black;
  color: white;
  font-size: medium ; 
  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
  display: inline; 
}

＆＃13;

<pre class="bash">
-bash-3.2$ groups 
unixuser feegroup figroup fogroup fumgroup
</pre>

＆＃13;

Answer 1

使用display: inline-block;将背景设为矩形，而不是仅仅在文本后面。

如果您希望它填充页面的整个宽度，而不是仅填充最长的行，请使用width: 100%;

＆＃13;

pre.bash {
  background-color: black;
  color: white;
  font-size: medium ; 
  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
  width: 100%;
  display: inline-block;
}

＆＃13;

<pre class="bash">
-bash-3.2$ groups 
unixuser feegroup figroup fogroup fumgroup
</pre>

＆＃13;

Answer 2

您可以删除display-inline：

＆＃13;

pre.bash {
  background-color: black;
  color: white;
  font-size: medium ; 
  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}

＆＃13;

<pre class="bash">
-bash-3.2$ groups 
unixuser feegroup figroup fogroup fumgroup
</pre>

＆＃13;

Answer 3

您需要做的就是将显示从display: inline更改为display: inline-block :)

这是因为当您将背景颜色设置为黑色时，它将绘制元素的背景。指定为inline的元素将仅与该行的内容一样大。通过将其更改为inline-block，元素将占用该行的整个空间，如块级元素的特征所给出的那样。如果您想了解更多信息，here是w3对显示属性说明的链接。

Answer 4

尝试将display: inline;更改为display: block;

将预标记设置为看起来像linux终端

4 个答案: