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

任何幫助，將不勝感激，如果你們中的一些是準備好聊天 - 甚至更好！我期待着你的回答。 P.S.如果這很重要，右邊的藍色是另一個容器。 :)

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%; 
}