我有一个弹出窗口(在 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>
最佳答案
在 close modal-preparation__close
上添加 margin-left
auto
.close.modal-preparation__close{
margin-left:auto;
}
关于javascript - 按钮内的 CSS 图像与弹出窗口中的标题文本位于同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57407250/