Question

我搜索了这个网站寻找答案并找到了类似的东西，但没有任何东西可以作为答案，可能是由于我缺乏这方面的经验。我正在使用表格下方的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>

Answer 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 Fiddle example

Answer 2

添加一些css：

#min,#max,#slide {
   float: left;
}

Answer 3

您可以添加CSS

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

这将确保元素彼此相邻而不是每行堆叠一次。

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

试图在同一行上获得3个HTML元素

3 个答案: