如何将两个按钮对齐到文本右侧，且文本与按钮保持同行排列

你可以通过Flex弹性布局实现需求，该方案可以自适应不同长度的文本，保证所有行的按钮都统一在右侧对齐：

第一步：添加CSS样式 #

.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}

.flex-box p {
  margin: 0;
  /* 可选：文本过长时显示省略号，避免挤压按钮空间 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

第二步：调整HTML结构 #

你可以把两个按钮放在同一个容器内，同时移除不需要的pull-right类（该类是Bootstrap旧版本的浮动类，Flex布局下无需使用）：

<div *ngFor="let weakness of weaknesses | async">
    <div class="flex-box">
        <p>{{ weakness }}</p>
        <div>
            <a class="btn btn-light btn-sm" href="#">更新</a>
            <button type="button" class="btn btn-danger btn-sm ms-1">删除</button>
        </div>
    </div>
</div>

原理解释 #

• display: flex将容器设为弹性布局，内部元素默认在同一行排列
• justify-content: space-between实现左侧文本贴左、右侧按钮组贴右的两端对齐效果
• align-items: center保证文本和按钮在垂直方向居中对齐
• 按钮放在同一个容器内作为整体参与Flex布局，不会出现两个按钮分散对齐的问题

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