对齐一行文本和图标 - angular css答案

【问题标题】：align in one line text and icon - angular css对齐一行文本和图标 - angular css
【发布时间】：2022-11-23 17:33:33
【问题描述】：

我有应该包含文本和图标的灰色行，我的代码： {{ trans.dashboard.settings.car.Name| translate }} <i class="fas fa-caret-up"></i>

这行得通，但是我想像现在一样将文本放在左侧，将图标放在右侧，所以容器左角的文本和右角的图标，内角我写了这段代码：

i { margin-left: 95px; }

但是当 margin left 有更高的像素图标出现在文本下方时，它们不在同一行中，如何创建更大的空间但仍然使这 2 个元素成为一行？

【问题讨论】：

【解决方案1】：

您可能不想自己设置边距，而是使用 flex-boxes 来实现这一点。你可以设置

display: flex; 
justify-content: space-between;

到该行，这将导致两个孩子在该行的左侧和右侧间隔开。

【讨论】：

【解决方案2】：

只需将文本和图标包裹在一个 div 中。假设您称它为容器。

.container{
  display: flex;
  justify-content: space-between;
  width: 100%;

}

设置容器的最小宽度，否则它将采用父宽度。

【讨论】：

【解决方案3】：

您可以将两者都包装在一个 span 标签中。父（行）标签应该有 display: flex;和 justify-content: space-between;声明。

【讨论】：