如何使两个元素在同一行 - 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>