如何在搜索欄左側添加按鈕？

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>