如何在搜索栏左侧添加按钮？

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> 

这里我得到了什么使用此代码：

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

}

Answer 1

只需设置表格的高度，以搜索栏的相同height，并添加position:relative

还那么你就需要改变你的按钮，顶部的值。

表单是您的按钮的父元素，绝对元素用于监视最靠近父亲的父亲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>