jquery - 我正在尝试将我的文本值与 slider 栏对齐，但遇到问题

Question

我已经研究这个问题几个小时了。 (我在 CSS 方面很糟糕)

我有这两个带有值的 jQuery slider 。我正在尝试将“房间:0”和“浴室:0”与相应的 slider 对齐。

    .pricebox {
    width: 400px;
    margin:0px;
    height:50px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
}
.custom-slider {
    margin-bottom:10px;
    width: 70%;
    float: right;
}
.values {
    width: 30%;
    text-align: left;
    float: left;
}
#cleared{
clear: both;
}


<div class="pricebox">
    <div id="slider-1" class="custom-slider"></div>
    <span>Rooms: <div id="slider-1-value" class="values">0</div></span>
<br />
    <div id="slider-2" class="custom-slider"></div>
    <span>Bathrooms: <div id="slider-2-value" class="values">0</div></span>
</div>
<div id="cleared">

Answer 1

我查看了您的网站，发现了问题: 我已经更新了你的 div 中的内联 css，所以根据你的样式表进行更改，然后它将起作用:

代码如下:

<div class="pricebox">
    <div class="custom-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-1" aria-disabled="false" style="float: left;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
    <span style="float: left;">Rooms: <div id="slider-1-value" style="display: inline;">1</div></span>
<br>
    <div class="custom-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-2" aria-disabled="false" style="float: left;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 20%;"></a></div>
    <span style="float: left;">Bathrooms: <div id="slider-2-value" style="display: inline;">2</div></span>
</div>