css - 始终在同一行强制 2 个元素

Question

我有一个包含以下内容的表格:

这样创建的:

<div class="currency">1,280.00</div>

div.currency {
    text-align: right;
    width: 100%;
}

div.currency:before {
    content: "$";
    float: left;
}

问题是，当表格单元格不够宽时，美元符号会溢出到下一行。在我的示例中不清楚的是 $ 符号将完全左对齐，小数值右对齐(Excel 中的会计样式)。

有没有办法强制它们始终位于同一行并调整表格单元格的大小，就像处理长字符串一样？

Answer 1

您可以在上面使用 flexbox，默认情况下，flex row 设置为 nowrap 因此它不会换行。然后使用 justify-content: space-between 来分隔元素，而不是使用 text-align 和 float

div.currency {
  width: 50px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
}

div.currency:before {
  content: "$";
}

<div class="currency">1,280.00</div>