Html CSS-空白：nowrap不是'；防止断线

所以我试着把一个进度条和一个按钮放在同一行的一个按钮中，但由于某种原因，它不起作用

<button type="button" class="btn btn-primary text-nowrap" style="white-space:nowrap;">
        cpu usage procentage:  <span class="badge badge-light live text-nowrap" id ="cpu" style="white-space:nowrap;">{{computer.cpu_usage_procentage}}</span>  
      </button>
    <div class="progress">
      <div id="cpu-progress" class="progress-bar bg-danger" role="progressbar" style="width: {{computer.cpu_usage_procentage}}%" aria-valuenow="{{computer.cpu_usage_procentage}}" aria-valuemin="0" aria-valuemax="100">{{computer.cpu_usage_procentage}}</div>
    </div>

cpu使用过程：{{computer.cpu\u usage\u procentage}
{{computer.cpu\u usage\u procentage}

---

我希望它们在同一行中，而不是在不同的行中，所以我看到了

空白：nowrap

应该可以完成这项工作，但由于某些原因，它仍然不起作用

空白与文本包装有关。这是两个要素

将此添加到css中：

.progress {
  display: inline-block;
}

---

谢谢，很好用。我会尽快接受它（等待12分钟），因为div是

块

元素，您必须使其

内联

或

内联块