Angular CSS：文本与图标单行左右对齐问题求助

以下是几种可靠的实现方式，替代你之前用margin-left的方案，避免图标换行：

• Flex布局（推荐）
  给灰色行容器添加flex布局，通过justify-content: space-between自动让文本居左、图标居右，同时保证垂直居中：

  .row-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ccc; /* 你的灰色背景 */
    padding: 8px 16px; /* 按需调整内边距 */
  }
  

  HTML结构无需修改，保持你原有的代码即可：

  {{ trans.dashboard.settings.car.Name| translate }} <i class="fas fa-caret-up"></i>
  

• Grid布局
  用网格布局分配空间，让文本占满容器剩余宽度，图标自适应自身宽度：

  .row-container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    background-color: #ccc;
    padding: 8px 16px;
  }
  

• 绝对定位方案
  给容器设置相对定位，图标设置绝对定位固定在右侧，同时垂直居中：

  .row-container {
    position: relative;
    background-color: #ccc;
    padding: 8px 16px;
    min-height: 40px; /* 防止内容溢出容器 */
  }
  .row-container i {
    position: absolute;
    right: 16px; /* 右侧间距按需调整 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
  }
  

你之前用margin-left的问题在于：当容器宽度不足时，过大的左边距会把图标挤到下一行。上面的方案都是通过布局规则固定图标位置，不会出现换行问题。

内容的提问来源于stack exchange，提问作者sikirajca