并排的水平输入范围和垂直输入范围

我希望把并排侧这两个输入范围：并排的水平输入范围和垂直输入范围

<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;"/>

我试着display:inline-block，但没有奏效。我该怎么做？

来源

2016-09-30 user217354

DEMO

及其与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 */ 
}

来源

2016-09-30 08:38:40 4dgaurav

工作你有没有考虑使用一个表？

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

顺便说一句，JavaScript标记不适合这个问题。

来源

2016-09-30 08:39:36 Kartal

此工作与fullpage.js – user217354

使他们widths 50％（或者，如果你想有一个margin更少），并添加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;"/>

编辑 - 如果你需要额外的内容除了这些输入，您可以将它们包装在父div中，并在必要时给予固定的宽度。

来源

2016-09-30 08:40:27 MoultoB

默认情况下，输入是内联的。如果您的两个输入不是并排的，那可能是由于容器宽度造成的。如果父宽度小于两个内联，则秒数将在新行上。

来源

2016-09-30 08:42:42

并排的水平输入范围和垂直输入范围

回答

相关问题