将 2 个按钮对齐到文本的右侧

Question

我试图让我的两个按钮出现在一段文本的最右侧。我希望文本和两个按钮都彼此内联，但文本在左侧，两个按钮在右侧。我见过多种解决方案，我可以只用一个按钮让它工作，但是当我有两个按钮时它就不起作用了。

我在“弱点”上运行一个 for 循环并打印出每个弱点。每个弱点都有更新和删除操作。

我尝试做margin-left，但每个弱点的长度不同，所以我的按钮不会对齐

我也尝试使用这篇文章中的一些解决方案，但似乎无法获得预期的结果：Place a button right aligned

任何帮助将不胜感激

HTML

<div *ngFor="let weakness of weaknesses | async">
    <div class="flex-box">
        <p>{{ weakness }}</p>
        <a class="btn btn-light btn-sm pull-right" href="#">Update</a>
        <button type="button" class="btn btn-danger btn-sm">Delete</button>
    </div>
</div>

Answer 1

试试这个：

#btnHolder {
  position:fixed;
  top:10px;
  right:10px;
  
}

<p>Text is here</p>
<div id="btnHolder">
    <button>Update</button>
    <button>Delete</button>
</div>

我不知道为什么这么难。应该更容易解决这个问题。

Answer 2

你应该这样做：

 .flex-box {
      display: flex;
      align-items: center;
      justify-content: start;
  }

 #buttons{
      margin-left: 10px;
  }

  <div class="flex-box">
  <p>Text is here</p>
  <div id="buttons">
   <a>Update</a>
   <button>Delete</button>
 </div>
</div>

Answer 3

一种解决方案是使用 flex 实现自动边距

nav {
  display: flex;
  align-items: center;
}

nav button:first-of-type {
  /* Key here is margin-left needs to be auto */
  margin: 0 10px 0 auto
}

<nav>
  <span>Text</span>
  <button>Button 1</button>
  <button>Button 2</button>
</nav>