如何使兩個元素在同一行 - html css

Question

我有這個代碼：

<div class="{{($type != 'forecast')?'col-md-8':'col-md-8'}}">
    <div class="form-group">
        <label>Name:</label>
        <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
        <i class="fa fa-info-circle" title="test"></i>
    </div>                                 
</div>

這是用戶界面

我只希望<i>圖標位於輸入字段旁邊而不是底部。

我怎樣才能做到這一點？

Answer 1

使用 class輸入組將input字段和icon包裝在一個 div 中。

<div class="input-group">
   <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}}>
   <i class="fa fa-info-circle" title="test"></i>
</div>

Answer 2

這是解決方案

<div class="form-group">
  <label>Name:</label>
  <div class="input-group" style="display: flex">
      <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
     <i class="fa fa-info-circle" title="test"></i>
 </div>  
</div>