Header-Elemente in einer Zeile

Question

Ich habe 7 Elemente, die ich in meinem HTML-Header-Abschnitt einfügen möchte.

Aber wenn ich diese 7 Elemente eins nach dem anderen in meinem Header-Abschnitt setze, sind die Elemente nicht auf einer einzigen Zeile angeordnet.

Das ist die Struktur, was ich tun möchte:

Aber der Ausgang sucht so -

Dies ist mein Code - -

<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> 

Jeder weiß, wie ich dieses Problem beheben kann!

Answer 1

Formularelement ist standardmäßig ein Block. Setzen Sie den Stil auf display: inline, oder fügen Sie den Header mit Ihrem Formular ein (alle Elemente befinden sich also im Formular).