Question

我有此组件列表，我想将它们排列在同一行上。我设法做到了，但是它们在垂直方向上没有正确对齐。另外，我不知道我是否可以替换该行

.search-container > * {
    display: inline-block;
}

在angularjs中，我使用的是layout =“ row”，但在angular 4中已经不存在了。

https://stackblitz.com/edit/angular-cteh6k

HTML

<div class="search-container" layout-align="space-between end">
    <div class="conditions">
        <mat-form-field>
            <mat-select #fontSize value="28px" placeholder="Select Search Field">
                <mat-option *ngFor="let index of [1,2,3,4,5]" value="opt{{index}}">opt{{index}}</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
            <button mat-button aria-label="Clear" *ngIf="value" matSuffix mat-icon-button (click)="value=''">
                <mat-icon>close</mat-icon>
            </button>
        </mat-form-field>      


    </div>
    <div class="buttons-container">
        <div class="condition-button clickable-elem">
                <mat-icon svgIcon="minus-circle-outline">asd</mat-icon>
        </div>
        <div class="condition-button clickable-elem">
                <mat-icon svgIcon="plus-circle-outline">asd</mat-icon>
        </div>
    </div>
    <div class="buttons-container">
        <button class="md-raised btn-submit" mat-button>FILTER</button>
    </div>
</div>

CSS

.search-container > * {
    display: inline-block;
}

.search-container {
font-size: 0.7rem;

}
md-input-container .md-errors-spacer{
min-height: 0 !important;
}


.buttons {
  margin-left: 5px;

}
.condition-button {
  display: inline-block;

}
svg {
  width: 30px;
  cursor: pointer;

}     
.conditions{
  max-height: 170px;
  padding-right: 10px;
  padding-top: 10px;
  overflow-y: auto;   
}

Answer 1

使用以下样式

.search-container {
  font-size: 0.7rem;
  display: flex;
  align-items: flex-end;
}

P.S .：如果要使其居中对齐，请使用“ align-items：center;”

也删除此样式

search-container > * {
    display: inline-block;
}

查看更新后的示例enter link description here

Answer 2

添加此CSS

 .buttons-container, .conditions
    {
        vertical-align: middle;
    }

如何在垫子设计中正确对齐div

2 个答案: