如何将下拉列表与 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>

属性，请找到以下代码片段：