我在一個有角度的專案中有這種格式，我想把紅色欄位放在同一行。我想為果嶺做同樣的事情。
代碼是這樣的。我該怎么做;
<!-- BUY PRICE -->
<div >
<mat-form-field appearance="outline">
<mat-label>Buy price</mat-label>
<input matInput formControlName="buy_price" placeholder="Enter buy price">
<span matPrefix>€ </span>
</mat-form-field>
</div>
<!-- FIRST BID -->
<div >
<mat-form-field appearance="outline">
<mat-label>First Bid Price</mat-label>
<input matInput formControlName="first_bid" placeholder="Enter 1st bid price">
<span matPrefix>€ </span>
</mat-form-field>
</div>
<!--LOCATION-->
<div >
<mat-form-field appearance="outline">
<mat-label>Location(City,Region)</mat-label>
<input matInput formControlName="location" placeholder="Enter location">
</mat-form-field>
</div>
<!-- COUNTRY -->
<div >
<mat-form-field appearance="outline">
<mat-label>Country</mat-label>
<mat-select formControlName="country">
<ng-container *ngFor="let country of countries">
<mat-option [value]="country.name">{{country.name}}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
</div>
uj5u.com熱心網友回復：
如果您將您想要的兩個表單組 div 包裝在一個包裝 div 的同一行中，并將display: flex應用于它，然后將flex-grow: 1和flex-basis:50%應用于每個表單組 div -你會把它們放在同一條線上。
請注意，以下是您帖子中的代碼-因此不起作用，因為我沒有所需的 md 代碼等，但是相關的 div 在同一行上水平對齊，并且我在它們周圍放置了邊框，因此您可以看到flex樣式的效果。
.form-group-wrapper {
display: flex;
margin-bottom:16px;
}
.form-group-wrapper .form-group{
flex-grow: 1;
flex-basis: 50%;
padding: 8px;
border: solid 1px red;
}<div class="form-group-wrapper">
<!-- BUY PRICE -->
<div class="form-group">
<mat-form-field appearance="outline">
<mat-label>Buy price</mat-label>
<input matInput formControlName="buy_price" placeholder="Enter buy price">
<span matPrefix>€ </span>
</mat-form-field>
</div>
<!-- FIRST BID -->
<div class="form-group">
<mat-form-field appearance="outline">
<mat-label>First Bid Price</mat-label>
<input matInput formControlName="first_bid" placeholder="Enter 1st bid price">
<span matPrefix>€ </span>
</mat-form-field>
</div>
</div>
<div class="form-group-wrapper">
<!--LOCATION-->
<div class="form-group">
<mat-form-field appearance="outline">
<mat-label>Location(City,Region)</mat-label>
<input matInput formControlName="location" placeholder="Enter location">
</mat-form-field>
</div>
<!-- COUNTRY -->
<div class="form-group">
<mat-form-field appearance="outline">
<mat-label>Country</mat-label>
<mat-select formControlName="country">
<ng-container *ngFor="let country of countries">
<mat-option [value]="country.name">{{country.name}}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/483791.html