HTMLで検索バーと検索ボタンを揃えるにはどうすればよいですか？

Question

検索バーの横に検索ボタンを配置したいのですが、その方法はわかりません。

HTML：

<div id="tmsearch"> 
<span class="btn-toogle active"></span> 
    <form id="tmsearchbox" method="get"> 
    <input type="hidden" name="controller" value="search"/> 
    <input type="hidden" name="orderby" value="position"/> 
    <input type="hidden" name="orderway" value="desc"/> 
    <input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?"/> 
    </form> 
    <button>Search</button> 
</div> 

JSFIDDLE ==>https://jsfiddle.net/bpr6qmjt/3/

おかげ

Answer 1

使用CSSスタイル "表示：インライン"

<div id="tmsearch"> 
<span class="btn-toogle active"></span> 
    <form id="tmsearchbox" method="get" style="display:inline"> 
    <input type="hidden" name="controller" value="search"/> 
    <input type="hidden" name="orderby" value="position"/> 
    <input type="hidden" name="orderway" value="desc"/> 
    <input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?"/> 
    </form> 
    <button style="display:inline">Search</button> 
</div> 

Answer 2

あなたは簡単にスタイルdisplay:inline-blockを追加することができますフォーム要素。この

<form id="tmsearchbox" method="get" style="display:inline-block"> 

よう またはあなたがCSSでフォームのスタイルを設定することができ

form#tmsearchbox { display :inline-block } 

Answer 3

idでそれを追加することができます：formタグでスタイルを

#tmsearchbox {display:inline;} 

をまたは埋め込み：

<form id="tmsearchbox" method="get" style="display:inline;"> 

Answer 4

<form id="tmsearchbox" method="get"> 
    <input type="hidden" name="controller" value="search"> 
    <input type="hidden" name="orderby" value="position"> 
    <input type="hidden" name="orderway" value="desc"> 
    <input class="tm_search_query form-control" id="myinput" type="text" name="search_query" placeholder="What are you shopping for today ?" style=" 
    float: left; 
"> 
    </form>