Каков наилучший способ плавать элементы одного и того же класса бок о бок?

Question

Начинающий HTML/CSS здесь, пытаясь найти лучший способ сделать что-то. В идеале было бы неплохо иметь объяснение, а также решение.

Так что я пытаюсь сделать, это размещение нескольких кнопок (возможно, 5-6) бок о бок, а затем на этикетке

Кнопки отформатированы, используя тот же класс CSS. Чтобы разместить их бок о бок, я устанавливаю float: left;

К сожалению, это добавляет следующий элемент после кнопок (метки) на той же линии, даже если я установил clear: both; для ярлыка.

Проблема в том, что float: left; определяет, как другие элементы формируют вокруг данного элемента. Это отлично подходит для первых кнопок n-1, поскольку она помещает следующую кнопку в ее сторону. Но он также помещает ярлык рядом с последней кнопкой.

Есть ли способ исправить это поведение без необходимости добавлять определенное форматирование CSS к последней кнопке или предоставить определенную ширину, которая заставляет метку находиться на следующей строке? (?, Как, может быть другой способ сделать это в целом)

Это пример того, что я делаю сейчас:

<style> 
    .myButton { 
    float: left; 
    } 
    #myLabel { 
    clear: both; 
    } 
</style> 
<div> 
    <button class="myButton">Button 1</button> 
    <button class="myButton">Button 2</button> 
    <button class="myButton">Button 3</button> 
    <button class="myButton">Button 4</button> 
    <label id="myLabel">Output Text</label> 
</div> 

Благодаря

Answer 1

Пожалуйста, проверьте это: jsFiddle. Я в основном обернул кнопки в <div id="buttons"> и присвоил следующие стили этому <div>.

#buttons { 
    width: 100%; 
    overflow: hidden; 
} 

Answer 2

label есть, по умолчанию, inline элемент. clear но only works on block-level elements, что имеет смысл.

Вам нужно будет обернуть кнопки в отдельный элемент и/или применить display:block к этикетке.

Answer 3

Вам не нужно плавать вашими кнопками; они, естественно, будут течь рядом друг с другом так же, как текст (вид). Если вы хотите поставить метку на своей собственной линии, у вас есть пара вариантов:

1. Положите разрыв строки (<br />) в HTML между последней кнопкой и этикетками
2. сделать этикетку display: block; в CSS, который гарантирует, что это единственное на его линии (после того, как поплавки ушли)