javascript - 按钮内的 CSS 图像与弹出窗口中的标题文本位于同一行

Question

我有一个弹出窗口(在 Bootstrap 中称为模态)，其中标题中有文本和按钮内的图像。我想将此图像按钮向右移动，使其看起来像这样 https://monosnap.com/file/0tktkDw6m2Y1QJOi5IBinoWRgps4gR而不是 https://monosnap.com/file/Un7Sl3WpVGNJgc4qclfQW9aA3PEdoa我试图根据这个主题找出答案 How to have two items on opposite sides on the same line但它不会奏效。代码如下

.modal-content-square-border {
    border-radius: 0;
}
.modal-content {
    position: relative;
}
.modal-destroy-bank-employee__header {
    display: flex;
    margin: 2rem 4.8rem;
    padding-bottom: 2rem;
}
.modal-destroy-bank-employee__body {
    margin: 2.4rem 4.8rem 5.1rem;
    padding: 0;
}
.modal-destroy-bank-employee__body__text-primary {
    color: #333;
    font-size: 1.6rem;
    letter-spacing: .5px;
    line-height: 20px;
    margin-bottom: 3.2rem;
    text-align: left;
}
.bank-employee__button-wrapper {
    display: flex;
    justify-content: center;
}

<div class="modal-destroy-bank-employee__header">
  <h4 class="modal-destroy-bank-employee__header-text text__blue">
    Möchten Sie das Nutzerkonto von Herrn l;fgkjs; löschen?
  </h4>
  <button type="button" class="close modal-preparation__close">
    <img alt="Close icon" class="modal-close-button" src="/assets/icon_close-ff7e8f2fd84d4bb1ad3833c3a74810b0676958b9b10f42333ea1a091f8d6a712.svg">
  </button>
</div>
<div class="modal-body modal-destroy-bank-employee__body">
  <p class="modal-destroy-bank-employee__body__text-primary">
    Die Mitarbeiterdaten werden unwiderruflich gelöscht
  </p>
  <div class="bank-employee__button-wrapper text-center">
    <button class="bank-employee__button bank-employee__button-delete bank-employee__button--modal">
      Nutzerkonto löschen
    </button>
    <button class="bank-employee__button submit-btn bank-employee__button--modal">
      Abbrechen
    </button>
  </div>
</div>

Answer 1

在 close modal-preparation__close 上添加 margin-left auto

.close.modal-preparation__close{
  margin-left:auto;
}