Angular表单所有输入框同排显示，如何不用br标签实现分行对齐？

问题原因 #

你的label、input、select都是默认的行内/行内块级元素，这类元素默认会在同一行排列，只要水平空间足够就不会自动换行。你没有对每个表单项做分组容器，也没有对表单容器设置布局规则，所以所有控件自然全部挤在同一行。

解决方法 #

方案1：Flex纵向布局（最推荐，对齐效果最优） #

先修改HTML结构，给每一组label+控件套一层独立容器，方便统一控制布局：

<div [formGroup]="form" class="form-container">
  <div class="form-item">
    <label for="firstName">First Name</label>
    <input formControlName="firstName" id="firstName" />
  </div>
  <div class="form-item">
    <label for="lastName">Last Name</label>
    <input formControlName="lastName" id="lastName" />
  </div>
  <div class="form-item">
    <label for="address">Address</label>
    <input formControlName="address" type="address" id="address" />
  </div>    
  <div class="form-item">
    <label for="email">Email</label>
    <input formControlName="email" type="email" id="email" />
  </div>
  <div class="form-item">
    <label for="phone">Phone</label>
    <input formControlName="phone" type="phone" id="phone" />
  </div>
  <div class="form-item">
    <label for="fare">Fare:</label>
    <select class="form-select" formControlName="fare" (change)="onSelectFare()">
      <option [value]="fare.name" *ngFor="let fare of availableFares">{{fare.name}}</option>
    </select>
  </div>
</div>

再修改CSS样式，无需添加<br>标签即可实现自动换行、统一对齐：

:host {
  border: 2px solid #1725e6;
  display: block;
  padding: 12px;
  margin-bottom: 12px;
}
/* 表单容器设为纵向弹性布局 */
.form-container {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 控制表单项之间的垂直间距 */
}
/* 每个表单项设为横向弹性布局，保证label和控件对齐 */
.form-item {
  display: flex;
  align-items: center;
  gap: 8px; /* 控制label和输入框的水平间距 */
}
/* 可选配置：给label设置固定宽度，实现所有表单项左对齐 */
.form-item label {
  width: 90px; /* 可根据实际需求调整宽度 */
  text-align: right;
}

方案2：修改标签默认属性（无需修改HTML结构） #

如果不想调整原有HTML结构，直接给元素加显示属性控制也可以实现效果：

/* 在原有CSS基础上添加以下内容 */
label {
  display: inline-block;
  width: 90px;
  margin-right: 8px;
  text-align: right;
}
input, select {
  display: inline-block;
  margin-bottom: 12px;
}

内容的提问来源于stack exchange，提问作者Eurydice