如何对齐表单中的元素？

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按钮，输入并选择字段即可。一个建议这些表单控件在diff浏览器中呈现不同。

在这种情况下，您需要添加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>

Answer 2

如果您不必支持旧的IE浏览器，我建议flexbox。它默认是响应式的，水平和垂直对齐非常容易。

＆＃13;

＆＃13;

form {
  width: 80%;
  display: flex;
  justify-content: space-around; /* Spread white space equally between and around items */
  align-items: center; /* Vertical alignment */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

要定位按钮，请使用CSS内置的“网格”。为要控制的每个按钮项添加“id”。然后使用CSS填充和边距来获得按钮位置的细节调整。

Answer 4

添加CSS：

button{
height: 24px;
padding-top: 12px;
}