CSS奇怪的布局结果

Question

我在排除正确对齐三个滑块的方法时遇到了一些困难，将它们设置在另一个下方。你可以看到我的日期结果......

我不明白是什么导致这种情况，因为所有滑块都被添加到一个公共类中，我只是通过它来设置它们。您可以在这里查看css设置：

.slider{
    display:inline-block;
    float: left;
    margin-top: 10%;
    background: url('solid attempt.png');
    width: 300px;
    height: 8px;
    background-size: 300px 8px;
    position: absolute;
    clear: right;
    border-style: none;
    background-repeat: no-repeat;
}

就是这样，在每个滑块前面都应该有一个标签告诉用户滑块与哪个滑块相关联，在我的例子中是角度，速度和重力。 标签几乎位于页面顶部，代码如下：

 .label{
    display: inline-block;
    float:left;
    width: 5px;
    height: 5px;
} 

如果有人准备好聊天，我们将非常感谢您的帮助 - 甚至更好！我很期待你的回答。 附：如果这很重要，右边的蓝色东西是另一个容器。 ：）

Answer 1

如果没有看到任何html代码，您可能需要为每个滑块和标签添加一个外部div。这样，您可以将对齐样式设置为包装器并使它们保持对齐。

例如，在HTML中：

<div class="slider-wrapper">
   <label>Slider 1</label>
   <div class="slider"></div>
</div>
<div class="slider-wrapper">
   <label>Slider 2</label>
   <div class="slider"></div>
</div>
<div class="slider-wrapper">
   <label>Slider 3</label>
   <div class="slider"></div>
</div>

在你的CSS中：

.slider-wrapper {
    display:block;
    float: left;
    margin-top: 10%;
    background: url('solid attempt.png');
    width: 300px;
    height: 8px;
    background-size: 300px 8px;
    background-repeat: no-repeat;
}

.slider {
    display:inline-block;
    width:100%;
}