Question

我想并排放置这两个输入范围：

<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，但没有工作。我怎么能这样做？

Answer 1

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 */
}

Answer 2

你考虑过使用桌子吗？

<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标签不适合这个问题。

Answer 3

如果您需要widths，请将margin设为50％（或更低），然后添加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中，并在必要时为其提供固定宽度。

Answer 4

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

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

4 个答案: