Ich habe ein Problem beim Ausrichten von Steuerelementen in Form

enter image description here

Schaltflächen etwas höher als Eingabe oder Auswahl.

Wie werden sie in einer Zeile ausgerichtet angezeigt?

Der Code sieht wie folgt aus:

<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>
0
Vasiliy Mazhekin 18 Apr. 2018 im 12:46

4 Antworten

Beste Antwort

Versuchen Sie einfach vertical-align: top, ein Feld zu knöpfen, einzugeben und auszuwählen. Ein Vorschlag, den diese Formularsteuerung in verschiedenen Browsern unterschiedlich wiedergibt.

In diesem Fall müssen Sie appearence: none; hinzufügen und Höhe und Breite für Formularsteuerelemente festlegen.

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>
4
Anmol Sandal 18 Apr. 2018 im 09:52

Wenn Sie keine alten IE-Browser unterstützen müssen, würde ich flexbox empfehlen. Es reagiert standardmäßig und die horizontale und vertikale Ausrichtung ist sehr einfach.

form {
  width: 80%;
  display: flex;
  justify-content: space-around; /* Spread white space equally between and around items */
  align-items: center; /* Vertical alignment */
}
<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>
1
Gerard 18 Apr. 2018 im 09:58

Verwenden Sie zum Positionieren Ihrer Schaltflächen das in CSS integrierte "Raster". Fügen Sie jedem Schaltflächenelement, das Sie steuern möchten, "id" hinzu. Verwenden Sie dann CSS-Abstand und Rand, um die Detailanpassungen der Tastenposition vorzunehmen.

0
Toolbox 18 Apr. 2018 im 09:51

CSS hinzufügen:

button{
height: 24px;
padding-top: 12px;
}
0
Sazzad Hussain 18 Apr. 2018 im 09:54