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，所以根据你的样式表进行更改然后它会起作用：

以下是代码：

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

我正在尝试将我的文本值与我的滑块旁边对齐，但有问题

1 个答案: