如何在同一行上对齐jQuery滑块和输入字段？

Question

我一直在摆弄滑块旁边的输入字段并且我没有运气。

FIDDLE

请看看我的小提琴。

<div id="slider1"></div>SME<input id="box2" class="form-control input-sm" data-cell="I2" data-format="0.00" size="4"> 

Answer 1

div默认情况下display:block;表示它放在一行中，但是，有很多解决方案可以解决您的问题。

<强>显示：块;

Jsfiddle

#slider1{
    width:100px;
    display: inline-block;
    vertical-align: middle;
}

<强>浮动：左

Jsfiddle

#slider1{
    width:100px;
    float:left;
}

更改html元素（div为span）

Jsfiddle

<span id="slider1"></span>SME<input id="box2" class="form-control input-sm" data-cell="I2" data-format="0.00" size="4">

#slider1 {
    width:100px;
    display: inline-block;
}

Answer 2

您可以将float: left添加到滑块的div

#slider1{
    width:100px;
    float: left;
}

见here。