Wie richte ich Etikett und Eingabe in einer Zeile aus?

Question

Oben ist meine Form:

ich das Etikett Kategorie wollen horizontal auf einer Stufe mit Kategorie wählen Drop-Down sein. Gleiches gilt für andere Formularelemente.

Hier ist meine CSS:

.labelContainer { 
    clear: both; 
    float: left; 
    width: 200px; 

} 

.inputContainer { 
    clear:left; 
    float: left; 
    width: 200px; 
} 

Und einige meiner HTML: von links:

<div class="labelContainer"> 
      <label for="Date">Date</label> 
     </div> 

     <div class="inputContainer"> 
     <input type="text" id="datepicker" name="datepicker"/> 
     </div> 

Answer 1

entfernen die klar zu positionieren. inputContainer-Klasse CSS:

CSS:

.labelContainer { 
    clear: both; 
    float: left; 
    width: 200px; 
} 

.inputContainer { 
    float: left; 
    width: 200px; 
} 

Answer 2

Verwenden Positionierung Ihrer Auswahlmenü

.inputContainer{ 
     position:relative; 
     bottom:10px; 
     left:20px; 
} 

Answer 3

Die clear: left auf Sie .inputContainer die beiden divs zueinander sein nächstes verhindert.

HTML:

<div class="labelContainer"> 
    <label for="Date">Date</label> 
</div> 
<div class="inputContainer"> 
    <input type="text" id="datepicker" name="datepicker"/> 
</div> 
<div class='clearfix'></div> 

CSS:

.labelContainer { 
    float: left; 
    width: 200px; 
} 

.inputContainer { 
    float: left; 
    width: 200px; 
} 

.clearfix { 
    clear: both; 
} 

Sie können es hier ansehen: jsfiddle.