html - 文本流动到下一行

Question

我在 html 中有以下内容:

.horizontal-div {
  display: flex;
  flex-direction: row;
}

.style-1 {
  width: 140px;
  height: 19px;
  font-size: 16px;
  color: #272d37;
  margin-top: 19px;
  margin-left: 8px;
}

.style-2 {
  width: 16px;
  height: 16px;
  float: right;
  margin-left: 295px;
  cursor: pointer;
}

<div class="horizontal-div">
  <div class="style-1">Dummy QC</div>
  <div class="style-2">Some image</div>
</div>

我观察到“Dummy QC”进入下一行，如下所示:

避免它进入下一行的解决方案是什么？

Answer 1

您可以使用 CSS white-space 属性

.horizontal-div {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
}