CSS将按钮移动到右侧答案

【问题标题】：CSS moving button to right sideCSS将按钮移动到右侧
【发布时间】：2021-05-06 17:32:44
【问题描述】：

我正在为 UI 使用引导程序和角度材料。在我的一个 div 中。我想将我的按钮移动到右侧，但是当我应用类“float-right”时，它会在另一个 div 后面。这是图片网址https://prnt.sc/y0xn90 下面是代码。

<div class="card-body">
        <div class="tab-content">

          <!-- /.tab-pane -->
          <div class="active tab-pane" id="timeline">
            <div>
              <button mat-raised-button color="primary">Add Treatment</button>
            </div>
            <div>
              <ul class="timeline" *ngFor="let treatment of patientTreatments">
                <li class="timeline-item bg-white rounded ml-3 p-4 shadow">
                  <div class="timeline-arrow"></div>
                  <h2 class="h5 mb-0">{{treatment.title}}<span class="float-right" style="cursor: pointer;">
                      <mat-icon>edit</mat-icon>
                    </span></h2>
                  <span class="small text-gray"><i class="fa fa-clock-o mr-1"></i>{{treatment.treatmentDate}}</span>
                  <p class="text-small mt-2 font-weight-light">{{treatment.summary}}</p>
                  <div *ngFor="let files of treatment.treatmentFiles">
                    <img src="" alt="Treatment image">
                  </div>
                </li>
              </ul><!-- End -->
            </div>
            <!-- The timeline -->
          </div>
          <!-- /.tab-pane -->

          <div class="tab-pane" id="settings">
            111
          </div>
          <!-- /.tab-pane -->
        </div>
        <!-- /.tab-content -->
      </div><!-- /.card-body -->

【问题讨论】：

这就是花车的工作原理。您可以考虑其他对齐机制，例如 Bootstrap 的 text alignment 或 flexbox utilities。
能否详细说明我对 UI/UX 部分很陌生。

标签： html css angular bootstrap-4 sass

【解决方案1】：

您可以使用宽度为 100% 的 display flex 属性，您可以使用 flex-end/flex-start 向左或向右推

        <div style="width: 100%;display: flex;justify-content: flex-end;align-items: center;">
          <button mat-raised-button color="primary">Add Treatment</button>
        </div>

【讨论】：