Как стилизовать dt и dd в одну строку с помощью CSS

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

Чтобы элементы <dt> и <dd> выравнялись по горизонтали, нужно применить к родительскому <dl> свойство CSS flexbox: display: flex;. При этом в коде HTML не должно быть переноса строки между <dt> и <dd>.

dl { display: flex; }
dt, dd { margin-right: 10px; } /* Создаем небольшой отступ между элементами */

Вот пример HTML-кода:

<dl>
  <dt>Термин</dt><dd>Описание</dd>
</dl>

Изучите и другие техники, включая CSS Grid, floating layouts и продвинутые методы flexbox, применимые для решения подобных задач по выравниванию элементов <dt> и <dd>.

Подробное руководство

Когда вам нужно создать двухколоночный макет, в котором элементы <dt> и <dd> располагаются на одной линии, CSS предлагает несколько методов:

Flexbox: Современный подход

Использование Flexbox – это простое и элегантное решение для малых макетов.

dl { display: flex; flex-wrap: wrap; }
dt { flex-basis: 30%; }
dd { flex-basis: 70%; margin-left: auto; } /* Элемент DD будет выровнен по правому краю */

Подробнее об этом расскажет наш спикер на видео

CSS Grid: Абсолютный контроль

Для точного контроля над расположением элементов используйте CSS Grid. Он идеально подходит как для небольших, так и для крупных дизайнов.

dl { display: grid; grid-template-columns: max-content auto; }
dt { grid-column-start: 1; }
dd { grid-column-start: 2; } /* DD будет следовать за DT */

Плавающие элементы: Проверенный временем способ

Этот традиционный метод подходит для работы над простыми макетами или в случаях, когда нужно учесть совместимость с браузером IE.

dl { overflow: hidden; } /* Предотвращаем проблемы с обтеканием */
dt, dd { float: left; width: 50%; } /* Равномерно распределяем доступное пространство */

Bootstrap dl-horizontal: Уже готовое решение для Bootstrap 3

Если ваш проект основан на третьей версии Bootstrap, вы можете использовать встроенное решение фреймворка.

Дополнительные рекомендации

Управление пространством с помощью Flexbox

В Flexbox вы можете управлять пространством между элементами <dt> и <dd>, применяя свойства flex-grow, flex-shrink и flex-basis.

dt { flex: 0 0 120px; }
dd { flex: 1; } /* DD займет остаток пространства */

Обработка длинных текстов

Если у вас есть <dt> или <dd> с длинным текстом без переноса, используйте word-break: break-all; или overflow: auto;, чтобы обеспечить корректное отображение текста.

dt, dd { word-break: break-all; } /* Предотвращаем выход текста за границы элемента */

Адаптивность

Для адаптивных макетов используйте медиа-запросы: при изменении размера экрана элементы <dt> и <dd> будут адекватно масштабироваться.

@media (max-width: 600px) {
  dl { flex-direction: column; } /* Каждому элементу отводится отдельная строка */
}

Стилизация

Чтобы сделать разметку визуально привлекательнее, добавьте отступы, паддинги или задайте цвет фона для <dt> и <dd>.

dt { background-color: #f8f9fa; padding: 5px; }
dd { margin-left: 15px; } /* Даем DD дополнительное пространство */

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

Представьте, что элементы <dt> и <dd> – это элементы вашего рабочего места, упорядоченно расположенные в одну строку:

<dt>        <dd>
 🖥️ Монитор  💻 Ноутбук    
 🖱️ Мышка    ⌨️ Клавиатура

Следующие правила CSS помогут поддерживать порядок:

dt, dd {
    float: left;     
    margin-right: 5px; 
}

В итоге получим: 🖥️💻 🖱️⌨️   

Благодаря CSS ваш макет будет выглядеть так же аккуратно, как и ваш рабочий стол.

Исскусство позиционирования с помощью Grid

CSS Grid предлагает потрясающие возможности для гибкого управления компоновкой макета:

dl { display: grid; grid-template-columns: repeat(2, max-content); }
dt { grid-area: 1 / 1; }
dd { grid-area: 1 / 2; } /* DD автоматически слежует за DT */

Вот шаблоны кода, которые помогут вам создать сложные макеты без изменения HTML-структуры.

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

1. Полное руководство по Flexbox от CSS-Tricks — детальное руководство с примерами использования Flexbox для выравнивания элементов <dt> и <dd>.
2. display в CSS: Cascading Style Sheets на MDN — документация по свойствам CSS display, которые важны для создания макетов.
3. CSS Flexbox (Гибкий бокс) на w3schools — понятное объяснение организации содержимого с помощью Flexbox.
4. Полное руководство по CSS Grid от CSS-Tricks — глубокое погружение в технологию CSS Grid для улучшения ваших навыков в области выравнивания.
5. Can I use... Support tables for HTML5, CSS3, etc — сервис для проверки совместимости браузера с функциональностью Flexbox.
6. Визуальное руководство по свойствам CSS3 Flexbox от DigitalOcean — визуальное пособие по свойствам Flexbox.