Question

我有一个显示日志列表的模式，如下所示。

<div id="showSanity" class="modal">
    <div class="infobox1" >
        <div class="container" style="white-space:pre-wrap;" id="logs">
            {{ testLog.val }}
        </div>
    <br/>
    <div class="okbutton"><button id="logsOkButton">OK</button></div>
    </div>
</div>

如果我的字体样式是Arial，我的标题仍保留在中心位置。但是，如果我将字体样式设置为等宽字体，则标题会向右移动。

.infobox1 {
  position: relative;
  background: #eceeee;
  border: 1px solid #42464b;
  border-radius: 6px;
  padding-top: 1px;
  padding-left: 15px;
  height: 400px;
  margin: 10px auto 0;
  font-style: normal;
  font-family:monospace;
  width: 400px;
  overflow: auto;
  font-size: 11px;
  align-items: centre;
  overflow-y: scroll;
}

我能知道我哪里出错吗？

Answer 1

为此，您必须从white-space:pre-wrap; div＆amp;中删除container将text-align: center;添加到infobox1 div 检查下面更新的代码段。

＆＃13;

.infobox1 {
  position: relative;
  background: #eceeee;
  border: 1px solid #42464b;
  border-radius: 6px;
  padding-top: 1px;
  padding-left: 15px;
  height: 400px;
  margin: 10px auto 0;
  font-style: normal;
  /*font-family:monospace;*/
  font-family:arial;
  width: 400px;
  overflow: auto;
  font-size: 11px;
  align-items: center;
  overflow-y: scroll;
  text-align: center;
}

＆＃13;

<div id="showSanity" class="modal">
    <div class="infobox1" >
        <div class="container" id="logs">
            {{ testLog.val }}
        </div>
    <br/>
    <div class="okbutton"><button id="logsOkButton">OK</button></div>
    </div>
</div>

＆＃13;

Answer 2

white-space: pre-wrap 意味着每个角色都会被展示，包括白色空间。

等宽字体，也称为固定间距，固定宽度或非比例字体，是字体和字符各自占据相同数量的水平空间的字体。这与可变宽度字体形成对比，其中字母和间距具有不同的宽度。 Read more about monospaced font

因此，当您使用等宽字体系列时，您的空白宽度比常规Arial字体大。

在

之前删除额外的空格或标签

<div class="container" style="white-space:pre-wrap;" id="logs"> {{ testLog.val }} </div>

CSS格式更改字体stye

2 个答案: