Выравнивание inline-block'ов слева и справа на одной строке

Быстрый ответ

Для быстрого выравнивания двух блоков inline-block по левому и правому краям на одной строке следует применить свойство CSS float. Посмотрите пример ниже:

<div>
  <span style="display: inline-block;">Слева</span> 
  <span style="display: inline-block; float: right;">Справа</span>
</div>

Все, что нужно, – прижать второй элемент к правому краю, и оба блока окажутся на одной линии, словно горошины в одном стручке.

Flexbox: современный подход к выравниванию

Flexbox – это более современный и удобный инструмент для выравнивания элементов без борьбы с float и clear.

.container {
  display: flex;
  justify-content: space-between; /* Заполняем пространство равномерно */
}

Свойство justify-content: space-between; обеспечивает равное расстояние между каждым элементом.

Grid-layout: контроль выравнивания на новом уровне

Если вам необходим больший контроль, воспользуйтесь CSS Grid Layout.

.container {
  display: grid;
  grid-template-columns: auto 1fr auto; /* auto: "Я подстроюсь под вас!" */
}

Grid-layout поднимает выравнивание на новый уровень. С CSS Grid у вас есть абсолютный контроль над выравниванием.

Исключаем пробелы с помощью нулевого размера шрифта

Используя inline-block, вы можете столкнуться с проблемой пробелов между элементами.

.container { 
  font-size: 0;  /* Исключаем пробелы */
}
.container > span { 
  font-size: 16px; /* Возвращаем размер шрифта элементам */
  display: inline-block;
  vertical-align: middle;
}

Установка font-size: 0 для контейнера поможет избежать нежелательных пробелов между элементами.

Запасной план: используем text-align

В случае необходимости поддержки устаревших браузеров, таких как IE7/9, можно использовать text-align.

.container { 
  text-align: justify; /* Распределяем содержимое на всю ширину контейнера */
}
.container:after {
  content: '';
  display: inline-block;
  width: 100%;
}

text-align поможет выровнять блоки для устаревших браузеров.

Адаптивное выравнивание с Bootstrap

Bootstrap 4 предлагает удобные классы для выравнивания, идеально подходящие для любителей простоты.

<div class="d-flex justify-content-between">
  <span>Слева</span>
  <span>Справа</span>
</div>

Не пренебрегайте возможностями Bootstrap: просто выберите нужные классы, и ваша задача решена.

Float и абсолютное позиционирование: отблагодарим и забудем

Несмотря на то, что иногда можно использовать float и абсолютное позиционирование, современные методы работы с CSS сделают вашу работу более продуктивной и упорядоченной.

Визуализация

Выводя нашу аналогию float, flexbox и grid-layout, представим, что у нас есть два друга на качелях:

👦 <div style="display: inline-block; float: left;">Левый друг</div>                 👧 <div style="display: inline-block; float: right;">Правый друг</div>

[👦: Выровнен слева] <--------------------------------------------------------------------------------------> [👧: Выровнен справа]

Левый друг (👦) и Правый друг (👧) находятся напротив друг друга, точно так же, как и элементы на странице при использовании CSS!

JavaScript: для выравнивания в реальном времени

Используйте немного JavaScript, чтобы создать контент, который не только выглядит приятно, но и адаптируется к изменяющимся размерам окна.

window.onresize = function() {
  var container = document.querySelector('.container');
  container.style.textAlign = window.innerWidth > 600 ? 'justify' : 'left'; /* 600px: "Тут должна быть граница!" */
};

Здесь JavaScript действует как ди-джей, подстраивая ритм под настроение толпы или размер экрана.

Работа с особенностями inline-block

С элементами inline-block иногда могут возникнуть сложности с выравниванием, но со свойством vertical-align: middle их можно урегулировать.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks
2. Основные концепции flexbox – CSS: Каскадные таблицы стилей | MDN
3. Понимание Flexbox: всё, что вам нужно знать
4. CSS Layout – float и clear
5. Flexbox Froggy – игра по изучению CSS flexbox
6. Могу ли я использовать... Поддержка функциональности HTML5, CSS3 и прочего