防止文本分成新行

Question

如何防止我的文字破坏：

我的代码：

#livbar {
  height: 20px;
  margin: 5px auto;
  width: 70%;
  border: #222;
  background-color: #222;
  text-align: center;
}

<div id="livbar">
  <p style="color: #d5d2d2; font: 11px 'PT Sans', sans-serif;">TEST:</p>
  <p style="color: #c0ac7f; font: 11px 'PT Sans', sans-serif; white-space: nowrap;">100%</p>
</div>

感谢。

Answer 1

解决，将display: inline添加到代码中。

Answer 2

看到文字分成两行是正常的，因为你对每个单词使用<p>元素，而<p>代表一个新的pragraph，它会自动断行。

如果要显示内联的两个单词，最好为每个单词使用<span>元素，因为跨距显示为内联。

但是，如果你坚持使用<p>元素添加display:inline;，那么它的风格就可以了。