CSS 响应按钮位置

Question

现在我正在尝试让我的模态响应，但“保存”按钮没有按我想要的方式定位。我想让按钮一直在同一个位置，但现在它正在消失。我的 HTML 和 css 看起来如下

.delete{
    font-size: 16px;
    max-width: 100%;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.delete .text-div{
    padding: 3px;
}
.delete .button-div{
    display: inline-block;
    position: relative;
    padding: 3px;
    /* right: 50%;*/
    left: 80%;
}

<div class="delete">
    <div class="dialog-content-wrapper">
        <mat-toolbar matDialogTitle class="mat-accent m-0">
            <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
                <span class="title dialog-title">Delete Entry</span>
                <button mat-icon-button (click)="onClose()" aria-label="Close dialog">
                    <mat-icon>close</mat-icon>
                </button>
            </mat-toolbar-row>
        </mat-toolbar>
    </div>
    <div class="text-div">
        <span>Are you sure you want to delete this vacation entry?</span>
    </div>
    <div class="button-div">
        <button mat-raised-button color="accent" class="button" (click)="buttonClick();onClose()">SAVE</button>
    </div>
</div>

Answer 1

首先，您不需要将单个元素包装到 div 中，这在可访问性方面不是一个很好的做法。

关于您的问题，您希望按钮具体放在哪里？如果它的位置设置为 relative，它将相对于最近的定位祖先定位 。这意味着您需要将 position 属性添加到 .delete div（通常，relative 就足够了）。

另一种实现您想要的方法（如果我理解正确的话）是将 align-self: end 添加到按钮元素，因为它被包裹在一个 flex 容器中。

CSS 响应按钮位置

CSS responsive Button position

html

javascript

css

angular