CSS定位关闭按钮的形式

Question

我使用bootstrap创建了一个搜索表单。我还使用jquery在输入文本时生成删除搜索按钮（x），但是，我很难尝试将其与搜索表单放在同一行（理想情况下在右侧的框中）。 正如你在第二张图片中看到的，当＆＃34; 1＆＃34;输入到搜索表单下方生成按钮的表单。我已将我的代码包含在下面，我们将非常感谢任何帮助。

<form id="PWFS">
  <label for="Label">Info</label>
  <button type="button" class="btn btn-link btn-xs"<i class="fa   fa-question-circle fa-lg"></i></button>
  <div class="row">
    <div class="col-md-8">
      <div class="input-group btn-group">
        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
        <input type="text" class="form-control search" id="search" placeholder="Workflow #">
        <span id="searchclear" class="searchclear fa fa-times"></span>
      </div>
    </div> 
    <button id="WFFsearch" type="submit">Search</button>
  </div>
</form>
</div>
<br>

CSS

.searchclear {
  position: relative;
  z-index: 10;
  right: 5px;
  top: 0;
  bottom: 0;
  height: 14px;
  margin: auto;
  font-size: 14px;
  cursor: pointer;
  color: #ccc;
}

Answer 1

谢谢Lal，Phil和adamdc78。我只需将位置改为绝对。