如何在搜索字段的左侧添加按钮？

Question

如何在搜索字段中添加按钮，使其看起来像这样？

这是我的代码：

<div id="search">
  <div class="container">
    <h1>Search U.K. house price data</h1>
    <form class="has-success has-feedback has-feedback-left">
      <label class="control-label sr-only" for="inputSearch">Search U.K. house price data</label>
      <input class="form-control" type="text" id="inputSearch" placeholder="Enter a postcode, street or address">
      <span class="glyphicon glyphicon-search form-control-feedback"></span>
      <button class="btn" type="submit">SEARCH</button>
    </form>
  </div>
</div>

这里＆＃39;我使用这段代码得到了什么：

.btn {
position:absolute;
top: 20px;
right: 100px;

}

Answer 1

只需将表单的高度设置为搜索栏的同一height，然后添加position:relative

此外，您还需要更改按钮顶部值。

Form是您按钮的父元素，绝对元素会监视与position:relative最近的父元素，并将其自身定位在此父元素的容器内。

Answer 2

它可以是那样的 jsfiddle

CSS

.btn {
position:absolute;
top: 5px;
right: 10px;
padding-top: 0px;
padding-bottom: 1px;
border-radius: 18px;}
.form-control-feedback{
left:0;
}
#inputSearch{
  padding-left: 30px;
  border-radius: 18px;
}

HTML

<div id="search">
 <div class="container">
 <h1>Search U.K. house price data</h1>
 <form class="has-success has-feedback has-feedback-left">
   <label class="control-label sr-only" for="inputSearch">Search U.K. house price data</label>
   <input class="form-control" type="text" id="inputSearch" placeholder="Enter a postcode, street or address">
   <span class="glyphicon glyphicon-search form-control-feedback"></span>
   <button class="btn" type="submit">SEARCH</button>
  </form>
 </div>
</div>