html - 如何对齐表单中的元素？

Question

我在对齐表单中的控件时遇到问题

按钮比输入或选择高一些。

如何在一行中显示它们？

代码如下所示:

<form [formGroup]="formGroup">

  <button class="td to-left-end" (click)="toFirstPage()"></button>
  <button class="td" (click)="toPrevPage()"></button>

  <input class="td" type="text" readonly formControlName="currentPageInfo">

  <button class="td" (click)="toNextPage()"></button>
  <button class="td" (click)="toLastPage()"></button>

  <select class="td" formControlName="pageSize">
    <option *ngFor="let item of pageSizes">{{item}}</option>
  </select>

</form>

Answer 1

只需尝试 vertical-align: top 按钮、输入和选择字段。一个建议是这些表单控件在差异浏览器中呈现不同。

在这种情况下，您需要添加 appearence: none; 并设置表单控件的高度和宽度。

button, input, select {vertical-align: top; -webkit-appearance:none; appearance:none; height: 30px; border: 1px solid; box-sizing: border-box;}

<form [formGroup]="formGroup">

  <button class="td to-left-end" (click)="toFirstPage()"></button>
  <button class="td" (click)="toPrevPage()"></button>

  <input class="td" type="text" readonly formControlName="currentPageInfo">

  <button class="td" (click)="toNextPage()"></button>
  <button class="td" (click)="toLastPage()"></button>

  <select class="td" formControlName="pageSize">
    <option *ngFor="let item of pageSizes">{{item}}</option>
  </select>

</form>