div中的右对齐按钮答案

【问题标题】：Right align button within a divdiv中的右对齐按钮
【发布时间】：2021-05-25 02:28:49
【问题描述】：

我不太擅长 CSS，所以我有一个问题要问新手。我有以下 html 片段：

<div _ngcontent-vyb-c4="" class="form-row">
   <div _ngcontent-vyb-c4="" class="col-md-12">
      <div _ngcontent-vyb-c4="" class="form-group">
         <h5 _ngcontent-vyb-c4="">Contract</h5>
         <button _ngcontent-vyb-c4="" class="buttons-form mat-mini-fab mat-button-base mat-primary" color="primary" mat-mini-fab="" type="button" ng-reflect-color="primary">
            <span class="mat-button-wrapper">
               <mat-icon _ngcontent-vyb-c4="" class="mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">settings</mat-icon>
            </span>
...

如何将按钮与h5右侧的图标对齐，在最右边对齐。这是当前布局的屏幕截图。我希望齿轮图标和按钮位于同一行这是 Angular 项目的一部分，好像这很重要。

【问题讨论】：

标签： html css layout

【解决方案1】：

您可以使用 flexbox 轻松对齐项目。

.form-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

<div _ngcontent-vyb-c4="" class="form-row">
   <div _ngcontent-vyb-c4="" class="col-md-12">
      <div _ngcontent-vyb-c4="" class="form-group">
         <h5 _ngcontent-vyb-c4="">Contract</h5>
         <button _ngcontent-vyb-c4="" class="buttons-form mat-mini-fab mat-button-base mat-primary" color="primary" mat-mini-fab="" type="button" ng-reflect-color="primary">
            <span class="mat-button-wrapper">
               <mat-icon _ngcontent-vyb-c4="" class="mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">settings</mat-icon>
            </span>
...

【讨论】：

我希望标题和按钮在同一行，只是按钮在最右边
哦，好吧，我误解了你的意思。我相应地更新了我的答案。只需给容器一个 display: flex, justify-content: space-between 就可以了。
这可行，但它会将元素拖到按钮下方。在这种情况下，它是一个 class="row" 的 div。它也浮动到齿轮图标的右侧，在这种情况下这是不受欢迎的行为。