Ich habe ein Problem beim Ausrichten von Steuerelementen in Form
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>4 Antworten
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>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>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.
CSS hinzufügen:
button{
height: 24px;
padding-top: 12px;
}