HTML右對齊最后一列

我有個問題。對于我當前的專案，我有一個包含串列的頁面。該串列包含帖子，顯示在css grid. 網格的最后 2 列需要text-aligned在右側，但這不起作用。這是代碼片段：

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. 此外，操作按鈕中的圖示并不完全居中，如下所示：

您可以看到上方洗掉按鈕的背景顏色發生了一些變化。圖示更多位于右下角。我試圖將它們與 class: 對齊.mat-icon-align，但這并不完全居中。

我怎樣才能讓這兩件事發揮作用？

更新

使用justify-content: flex-end;結果如下：

在網格的末尾，最后一列超出螢屏？

uj5u.com熱心網友回復：

你需要改變

.right {
  text-align: right;
}

到

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

當使用flex-box和grid改變瀏覽器分配內部內容空間的方式時。您的問題是div該類的's.right不是單元格的全寬。 justify-content: flex-end;在課堂上會像你要求的那樣將內容推到最右邊。

標籤：html css 有角的

上一篇：無法啟動Angular應用程式

下一篇：堆疊的條形意外地用條形高度的總和進行了注釋