我是角度和網頁設計的新手，我面臨著我無法理解的情況。我有一個由帶有幾個欄位的表單組成的組件。當我的組件被渲染時，所有欄位都在同一行上，如下圖所示。我不想<br>在欄位之間引入，因為在這種情況下，欄位未對齊會產生丑陋的結果。下面是組件代碼：
<div [formGroup]="form">
<label for="firstName">First Name</label>
<input formControlName="firstName" id="firstName" />
<label for="lastName">Last Name</label>
<input formControlName="lastName" id="lastName" />
<label for="address">Address</label>
<input formControlName="address" type="address" id="address" />
<label for="email">Email</label>
<input formControlName="email" type="email" id="email" />
<label for="phone">Phone</label>
<input formControlName="phone" type="phone" id="phone" />
<label for="fare">Fare:</label>
<select formControlName="fare" (change)="onSelectFare()">
<option [value]="fare.name" *ngFor="let fare of availableFares">{{fare.name}}</option>
</select>
</div>
及其相應的css：
:host {
border: 2px solid #1725e6;
display: block;
padding: 12px;
margin-bottom: 12px;
}
你知道我的代碼有什么問題嗎？
uj5u.com熱心網友回復：
這不是角度問題，而是關于 CSS 屬性的位置
它可以通過向display: block標簽添加 css 屬性來實作
label {
display: block;
}
uj5u.com熱心網友回復：
我不知道我是否理解您的需求，但是如果您希望輸入一個低于另一個，請嘗試以下操作：
<div >
<label for="firstName">First Name</label>
<input id="firstName" />
</div>
<div >
<label for="lastName">Last Name</label>
<input id="lastName" />
</div>
其中 mt 代表邊距頂部。也許像這樣。 在此處輸入圖片說明
uj5u.com熱心網友回復：
首先，您需要使用一些樣式和回應式框架，例如 bootstrap。
您可以通過三種方式在專案中包含引導程式
第一種方式
使用 CDN（內容交付網路）<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >第二種方式
使用 NPM 包npm i bootstrap
第三種方式
使用一些 CSS 屬性，例如display: block;
您可以在此處查看引導程式檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/360627.html
標籤：有角的