如何让HTML中必填红星号与Angular ng-select下拉控件同处一行？

直接按以下两步修改app-ec-dropdown组件代码即可，父组件调用逻辑无需改动：

1. 修改组件HTML代码 #

调整结构拆分星号、下拉控件、验证提示为三个独立区块，用flex容器保证星号和下拉控件强制同行：

<!-- 星号与下拉控件的同行容器 -->
<div class="flex-row">
  <!-- 星号独立区块，仅必填时显示 -->
  <div class="required" *ngIf="required">
    *
  </div>
  <!-- 下拉控件独立区块 -->
  <div class="input-container">
    <ng-select 
      class="custom"
      [items]="items"
      bindLabel="Name"
      bindValue="Id"
      (focus)="focus()"
      (close)="close()"
      (clear)="clear()"
      (blur)="blur()"
      placeholder="Select"
      [(ngModel)]="selectedId"
      [required]="required"
    >
    </ng-select>
  </div>
</div>
<!-- 验证提示独立区块 -->
<div *ngIf="!validatationPassed()">
  <div class="row alert alert-danger alert-div">
    <span>
      Required field
    </span>
  </div>
</div>

2. 修改组件CSS代码 #

替换原有inline相关样式，适配新结构的布局要求：

/* 星号与下拉控件的同行flex布局 */
.flex-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.required {
  color: red;
  line-height: 2.2; /* 可根据你的ng-select实际高度调整，保证和输入框对齐 */
  flex-shrink: 0; /* 防止星号被挤压宽度 */
}

.input-container {
  flex: 1;
  width: 100%;
}

/* 验证提示缩进，和下拉控件左对齐，可根据State Name输入框的提示位置调整 */
.alert-div {
  margin: 4px 0 0 20px;
}

如果调整后和State Name输入框的对齐效果有差异，可按需修改.required的line-height、margin属性，以及.alert-div的缩进值即可。

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