Angular CSS HTML 內聯標簽和輸入字段。 如何將標簽向左浮動，將輸入字段向右浮動

Question

我正在處理一個有很多標簽輸入字段組合的角度形式。 我得到了帶有內聯塊樣式的標簽和輸入文件，因此它們在同一行上呈現。 我想將標簽浮動或拉到最左邊，而輸入字段控件是浮動或拉到最右邊。 我嘗試了一些 CSS 更改，但到目前為止沒有成功，任何幫助表示贊賞。

 .input-w label, .input-w select { float:none; display: inline-block; vertical-align: middle; } .label { padding: 0.21em 0.4em 0.2em; box-shadow: none; }

 <form [formGroup]="myForm"> <div class="row"> <div class="col"> <div class="input-w label"> <label for="dropdown1" class="form-inline">Options: </label> <select formControlName="dropdown1" class="form-control form-line"> <option *ngFor="let option of Options" [ngValue]="option.value"> {{option.display}} </option> </select> </div> </div> </div> </form>

Answer 1

讓我們像下面一樣更改 css 屬性，以便您可以獲得所需的輸出：

解決方案1

.input-w label, .input-w select {
    display: inline-block;
    vertical-align: middle;
}

.input-w select{
   float: right;
}

.label {
    padding: 0.21em 0.4em 0.2em;
    box-shadow: none;
}

添加浮動右側將幫助您將標簽移動到最右側。

解決方案2：

刪除添加到label & select標簽的所有 css 並將此 css 添加到 class input-w 。 簡單有效

.input-w {
    display: grid;
    grid-template-columns: 1fr 1fr;    
}

Answer 2

只需要稍微重新排列您的 css 類。 將 .label 類從容器 div 上移開並將其放在標簽上，容器不需要也有浮動。 也可以添加一個單獨的類來將浮動放在選擇上。 我已經包含了一個示例 jsfiddle。

<form [formGroup]="myForm">
       <div class="row">
         <div class="col">
      
           <div class="input-w">
             <label for="dropdown1" class="form-inline label">Options: </label>
             <select formControlName="dropdown1" class="form-control form-line select-input">
               <option *ngFor="let option of Options" 
                              [ngValue]="option.value">
                              {{option.display}}
               </option>
             </select>
               
          </div>
        </div>
      </div>
    </form>

.input-w label, .input-w select {
    vertical-align: middle;
    display: block;
}

.label {
    padding: 0.21em 0.4em 0.2em;
    box-shadow: none;
    float: left;
}

.select-input{
  float: right;
}

https://jsfiddle.net/e0wzpsb3/