HTML 右对齐最后一列

Question

我有问题。对于我当前的项目，我有一个带有列表的页面。该列表包含帖子，显示在 css grid 中。网格的最后 2 列必须是右侧的 text-aligned，但这不起作用。这是代码sn-p：

mat-form-field {
    margin: 0px 10px;
}

/**
 * Add basic flex styling so that the cells evenly space themselves in the row.
 */
mat-list {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

.profile-picture-container {
    height: 40px;
    width: 40px;
    position: relative;
    text-align: center;
    color: white;
}

.profile-picture-container > img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.fa-play {
    color: white;
}

#btnToggleAudio {
    background-color: transparent;
    border: none;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

mat-list-item {
    flex: 1;
}

.header {
    font-weight: bold;
}

h3 {
    padding-bottom: 5px;
}

.item-grid {
    display: grid;
    grid-template-columns: 60px 40% 20% 20% 20%;
    align-items: center;
}

.item-grid > div {
    display: flex;
    align-items: center;
}

.right {
    text-align: right;
}

mat-list-item:hover {
    background-color: #c4c4c4;
}

mat-list-item:hover #profile-picture {
    filter: brightness(70%);
}

mat-list-item:hover #btnToggleAudio {
    display: block;
}

.action-button{
    height: 30px!important;
    width: 50px!important;
    min-width: unset!important;
}

.mat-icon-align {
    vertical-align: middle;
}

@media (max-width: 900px) {
    .item-grid {
        display: grid;
        grid-template-columns: 50% 25% 25%;
    }

    .desktop-only {
        display: none;
    }
}

<mat-list>
    <h3 matHeader>Reported posts</h3>
    <mat-list-item>
        <div matLine>
            <div class="item-grid" matline>
                <div class="profile-picture-container" style="grid-row: 1 / 3">
                    <img id="profile-picture" src="/assets/images/post_city.jpg">
                    <button id="btnToggleAudio" (click)="onDismissClick(1)">
                        <i class="fas fa-play"></i>
                    </button>
                </div>
                <div class="header">Title</div>
                <div class="header desktop-only">Username</div>
                <div class="header right">Reports</div>
                <div class="header right" style="background-color: blue">Actions</div>
                <div>Test post</div>
                <div class="desktop-only">Dummy-2000</div>
                <div class="right">3</div>
                <div class="right" style="background-color: blue">
                    <button mat-button class="action-button right">
                        <mat-icon class="mat-icon-align">check_circle</mat-icon>
                    </button>
                    <button mat-button class="action-button right">
                        <mat-icon class="mat-icon-align">delete</mat-icon>
                    </button>
                </div>
            </div>
        </div>
    </mat-list-item>
    <mat-divider></mat-divider>
</mat-list>

如您所见，报告和操作未向右对齐，而它们都包含类right。此外，操作按钮中的图标未完全居中，如下所示：

您可以看到上方删除按钮的背景颜色发生了一些变化。图标更多地位于右下角。我试图将它们与班级对齐：.mat-icon-align，但这并不完全居中。

我怎样才能让这两件事起作用？

更新

使用justify-content: flex-end; 会导致以下结果：

在网格的末尾，最后一列超出了屏幕范围？

Answer 1

你需要改变

.right {
  text-align: right;
}

到

.right {
    justify-content: flex-end;
}

使用flex-box 和grid 会改变浏览器分配内部内容空间的方式。您的问题是 div 的类 .right 不是单元格的全宽。课堂上的justify-content: flex-end; 将按照您的要求将内容推送到最右侧。