如何將下拉列表與 mat-card-title 元素的右側對齊？

Question

目標：將下拉列表與其他元素的右側對齊

問題：它總是顯示在下面

這是一個 Angular 站點

我嘗試過的：我嘗試在 mat-form-field 中添加 mat-select 並分配一個 css 類。 我也試過在它周圍放置一個表格，然后在表格中放置墊卡標題。 我也試過改變 mat-card-title 的寬度我試過在這兩個元素周圍放置一個 div

HTML :

<mat-card class="login-card">
    <div>
        <mat-card-title class="text-center" i18n="@@MoVeSeLo_H1_1">
            Please Sign In
        </mat-card-title>
        <form [formGroup]="_siteForm">            
            <mat-form-field class="right">
                <mat-select (selectionChange)="doSomething($event)" placeholder="Language">
                    <mat-option *ngFor="let language of languages" [value]="language">
                        {{language.viewValue}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
       </form>
    </div>
</mat-card>

CSS :

.login-card {
    width: 80%;
    max-width: 80rem; }

.mat-form-field {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 30rem; }

.right {
    float: right;
    width: 200px;
}

圖片顯示它當前的位置，箭頭指向我希望它的位置：

Answer 1

您可以將選擇和標題放入flexbox ，例如：

<mat-card class="login-card">
  <form [formGroup]="_siteForm">
    <div class="title-container">
      <mat-card-title i18n="@@MoVeSeLo_H1_1">
        Please Sign In
      </mat-card-title>
        <mat-form-field class="language-field">
            <mat-select (selectionChange)="doSomething($event)" placeholder="Language">
                <mat-option *ngFor="let language of languages" [value]="language">
                    {{language.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
  </form>
</mat-card>

...

.title-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 8px;
}

.language-field {
  margin-top: -16px;
  margin-left: 16px;
}

我還調整了選擇輸入的邊距以使其看起來正確。

閃電戰鏈接

---

但是，如果您希望標題在卡片內居中，則使用“絕對”位置進行選擇會更容易，而不是使用 flexbox，例如：

...

.title-container {
  position: relative;
  margin-top: 8px;
}

.title {
  text-align: center;
}

.language-field {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -16px;
}

閃電戰鏈接

Answer 2

最簡單的方法，這可以使用位置 CSS 進行管理

 #parent { position: relative; width: 500px; height: 400px; background-color: #fafafa; border: solid 3px #9e70ba; font-size: 24px; text-align: center; } #child { position: absolute; right: 0px; width: 200px; height: 200px; background-color: #fafafa; border: solid 3px #78e382; font-size: 24px; text-align: center; }

 <div id='parent'> <div id='child'></div> </div>

屬性，請找到以下代碼片段：