検索フィールドの左側にボタンを追加するにはどうすればよいですか？

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>