Angular CSS HTML 内联标签和输入字段。如何将标签向左浮动并在右侧输入字段答案

【问题标题】：Angular CSS HTML inline label and input field. how to float label to the left and input field to the rightAngular CSS HTML 内联标签和输入字段。如何将标签向左浮动并在右侧输入字段
【发布时间】：2021-07-19 17:33:17
【问题描述】：

我正在研究一个有许多标签输入字段组合的角度形式。我得到了带有内联块样式的标签和输入文件，因此它们在同一行上呈现。我想在输入字段控件浮动或拉到最右边时将标签浮动或拉到最左边。我尝试了一些 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>

【问题讨论】：

你可以使用 flexbox 代替浮动吗？如果是这样，您可以在 .input-w.label 元素上使用 justify-content: space-between。

标签： html css angular

【解决方案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;
}

添加 float right 将帮助您将标签移动到最右侧。

解决方案 2：

删除所有添加到 label 和 select 标签的 css 并将这个 css 添加到类 input-w 。简单有效

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

【讨论】：

【解决方案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/

【讨论】：