Angular CSS HTML内联标签和输入框。如何将标签浮动到左侧，将输入框浮动到右侧？

Question

我正在处理一个Angular表单，其中有许多标签输入字段组合。我已经使用内联块样式对标签和输入文件进行了样式设置，因此它们在同一行上呈现。我想将标签浮动或拉到最左边，而输入字段控件则浮动或拉到最右边。我尝试了一些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>

- user1250264

---

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

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;
}

添加 float right 可以将标签移动到最右边。

解决方案2：

删除所有添加到label和select标记的CSS，并将此CSS添加到类input-w中。简单而有效。

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

- Arun s

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/

- nightwolf555