Как добавить кнопку слева от поля поиска?

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>