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

Question

我已经研究这个问题几个小时了。（说到CSS我很糟糕）

我有这两个 jQuery 带有值的滑块。我正在尝试将 "Rooms: 0" 和 "Bathrooms: 0" 对齐到它们对应的滑块旁边。

    .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 所以根据你的风格进行更改 sheet 然后它将起作用：

代码如下：

<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>

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

I'm trying to align my text values next to my slider bar but having issues

html

css

jquery

css-float