Как можно выстроить HTML элементы в одну сплошную линию? Легко! Давайте разбираться.
HTML
В распоряжении имеется следующая HTML разметка:
<div id="elementsInLine"> <div>Element 1</div> <div>Element 2</div> </div>
CSS
CSS код может быть разным.
Способ 1
Делаем блочные элементы снаружи строчными и даём им фиксированную ширину, чтобы они не растягивались на всю доступную ширину, как положено это делать всем блочным элементам.
#elementsInLine div {display: inline-block; width: 100px;}
Способ 2
Просто делаем каждому элементу левое выравнивание, чтобы следующий за ним обтекал его справа. В этом случае ширина элементов подберётся сама по их содержимому. Чтобы было красивее добавляем отступы.
#elementsInLine div {float: left; margin-right: 5px;}
Преимущество второго способа в том, что точная ширина каждого элемента высчитывается автоматически и отступы всегда будут равными.
Вариант 2
Вместо блоков часто лучше использовать список. В случае использования списка ничего не меняется, просто элементам надо будет убрать ещё и маркеры.
HTML:
<ul id="elementsInLine"> <li>Element 1</li> <li>Element 2</li> </ul>
Вот так просто.