Seite an Seite horizontal Eingangsbereich und vertikale Eingangsbereich

Question

Ich möchte Side-by-Seite setzen diese beiden Eingangsbereich:

<input type="range" class="meter" value="50" min="30" max="80">         
<input type="range" class="sensitivity" value="3" orient="vertical" style="-webkit-appearance: slider-vertical;"/> 

Ich habe versucht, mit display:inline-block aber hat nicht funktioniert. Wie kann ich das tun?

Answer 1

DEMO

Sein mit Arbeits display : inline-block

input{ 
    width: x|unit /* as per your design */ 
    display:inline-block; 
    vertical-align:middle /* vertical alignment if u require -- top | bottom | middle | baseline */ 
} 

Answer 2

Haben Sie darüber nachgedacht mit Hilfe einer Tabelle?

<table> 
<tr> 
<td><input type="range" class="meter" value="50" min="30" max="80"></td> 
<td><input type="range" class="sensitivity" value="3" orient="vertical" style="-webkit-appearance: slider-vertical;"/></td> 
</tr> 
</table> 

Übrigens ist Javascript-Tag für diese Frage nicht geeignet.

Answer 3

Machen Sie ihren widths 50% (oder weniger, wenn Sie einen margin wollen), und fügen Sie float: left

input { 
 
    width: 48%; 
 
    float: left; 
 
    margin: 1%; 
 
    }

<input type="range" class="meter" value="50" min="30" max="80">         
 
<input type="range" class="sensitivity" value="3" orient="vertical" style="-webkit-appearance: slider-vertical;"/>

EDIT - Wenn Sie neben diesen Eingängen zusätzliche Inhalte benötigen, können Sie Wickeln Sie sie in ein Eltern-div und geben Sie bei Bedarf eine feste Breite an.

Answer 4

Standardmäßig ist die Eingabe inline. Wenn Ihre beiden Eingänge nicht nebeneinander liegen, könnte dies an einer Behälterbreite liegen. Wenn die übergeordnete Breite weniger als zwei inline ist, werden die Sekunden in einer neuen Zeile angezeigt.