将 pre 标记设置为看起来像 linux 终端答案

【问题标题】：Styling a pre tag to look like a linux terminal将 pre 标记设置为看起来像 linux 终端
【发布时间】：2017-09-08 23:08:23
【问题描述】：

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

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; 
}

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

【问题讨论】：

这样的？演示：jsbin.com/wiheroqaka/edit?html,css,output

这是我的廉价工作

 -bash-3.2$ groups                     unixuser pbunityp pbuniprd pbarcd pbarcp pbuningp

看看这个：jsbin.com/dafukadaqa/1/edit?html,css,output
如果你需要一个可编辑的“假”终端界面，看看这个：stackoverflow.com/questions/12905726/…

标签： html css

【解决方案1】：

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

如果你想让它填满页面的整个宽度，而不仅仅是最长的行，请使用width: 100%;

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;
}

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

【讨论】：

【解决方案2】：

您可以删除display-inline:

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;
}

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

【讨论】：

【解决方案3】：

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

这是因为当您将背景颜色设置为黑色时，它将绘制元素的背景。指定为inline 的元素将仅与该行的内容一样大。通过将其更改为inline-block，该元素将占据该行的全部空间，这由块级元素的特性给出。如果您想了解更多，here 是 w3 对 display 属性的解释的链接。

【讨论】：

【解决方案4】：

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

【讨论】：