0

我在这个网站上搜索了答案并找到了类似的东西，但没有什么突出的答案，可能是因为我缺乏这方面的经验。我正在使用表格下方的 JQuery 滑块，并且滑块必须位于其自己的 div 中。我试图让“min”标签显示在滑块的左侧，“max”显示在右侧，所有 3 个元素都在同一行上。正如下面的代码所示，它将每个元素放在自己的行上，我也明白为什么会这样。

但是，我尝试向左浮动，将每个放在自己的 div 中，并将所有 3 个放在一个 div 中。我也尝试过这些的组合。我无法得到它，我尝试的每个实验都会导致对我来说没有逻辑意义的外观。

我错过了什么？谢谢你的帮助 ：）

<label id="min">0</label>
<div id="slider" style="width:450px"></div>
<label id="max">200</label>
4

3 回答 3

1

您可以使用 CSS 浮动来做到这一点。

<style>
    #mySlider label, #mySlider div {float: left;)
</style>    
<div id="mySlider">
    <label id="min">0</label> 
    <div id="slider" style="width:450px">(slider)</div> 
    <label id="max">200</label> 
</div>    
​

JS 小提琴示例

于 2012-08-09T17:51:13.280 回答
1

添加一些CSS：

#min,#max,#slide {
   float: left;
}
于 2012-08-09T17:52:20.027 回答
1

您可以添加 CSS

#min, #max, #slider {
display:inline-block; vertical-align:top;
}

这将确保所有元素都堆叠在一起，而不是每行一个。

您也可能会发现有关浮动与内联块的有趣阅读http://www.ternstyle.us/blog/float-vs-inline-block

于 2012-08-09T17:56:19.870 回答