CSS weird layout result

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