ヘッダー要素を1つの行に配置

Question

私はhtmlヘッダーセクションに入れたい7つの要素を持っています。

しかし、これらの7つの要素をヘッダーセクションに1つずつ配置すると、要素は1つの行に配置されません。

これは私が何をしたいの構造である：

が、出力はそのよう探している -

これは私のコードです - -

<header> 
    <div class="mdl-layout-icon"> 
     <!-- icon --> 
     <img src="public/images/bower.png" alt="office" height="42" width="82"> 
     <form action="#"> 
     <!-- TextField --> 
     <input class="mdl-textfield__input" type="text" id="searchText"> 
     <label class="mdl-textfield__label" for="searchText">Search</label> 
     <!-- Button --> 
     <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Search</button> 
     </form> 
     <!-- Shopping Cart --> 
     <i class="material-icons">&#xE8CC;</i> 
     <!-- Quantity --> 
     <label for="quantity">quantity</label> 
     <!-- Price --> 
     <label for="price">price</label> 
     <!-- CheckOut --> 
     <i class="material-icons">&#xE877;</i> 
    </div> 
    </header> 

この問題を解決するにはどうすればよいですか？

Answer 1

フォーム要素はデフォルトでブロックです。そのスタイルをdisplay: inlineに設定するか、フォームにヘッダーをラップします（すべての要素はフォームの中にあります）。