html - 如何将下拉菜单对齐到 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;
}

我还调整了选择输入的边距，以使其看起来正确。

stackblitz link

---

但是如果您希望标题在卡片中居中，使用“绝对”位置进行选择会更容易，而不是使用 flexbox，例如:

...

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

.title {
  text-align: center;
}

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

stackblitz link