设置pre标签的样式看起来像Linux终端

Question

我正在尝试做的是创建一个<pre>看起来像bash终端的标签-黑色背景和白色字母，等距字体。

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>

Answer 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>