Как правильно сделать выравнивание списка характеристик?

Question

[Genri_Rus]

Вот пример списка с характеристиками: ссылка
Как выровнять названия, допустим чтобы это было независимо от количества текста в названии?

Answer 1

[Ankhena]

Если список характеристик верстать используя теги dl, dt и dd, то проблемы вообще не будет.

Comments

[Genri_Rus]

Спасибо за ответ, а без этих тегов как я понял только на гридах получится?

[Ankhena]

Genri_Rus, без этих тегов на гридах получится, только когда нормально приедет subgrid.
С li можно использовать display table и тд.

С dl просто гридом.

[Genri_Rus]

Ankhena,

С li можно использовать display table и тд.

Вот сделал, но почему-то все равно не выравнивается.
Мне нужно чтобы отступ был между названием и описанием ровно 20px.

[Ankhena]

Genri_Rus, погуглите как устроены таблицы: снаружи таблица, в ней строки, а в них ячейки.
Есть ещё всякие волшебные вещи типа thead, col,и т.д. но их опустим, нам они не нужны сейчас.
ul - таблица
li - строка
span - ячейка.

Не хотите использовать dl (почему, кстати?), то хотя бы замените два span, на заголовок и параграф? Ну чтобы хоть как-то семантика была похожа на семантику.

[Genri_Rus]

Ankhena, ну вот сделал )
Правда у меня не получается сделать чётко отступ в 20px.

[Ankhena]

Genri_Rus, значит, нужно поспать и утром найти ошибку.

[Genri_Rus]

Ankhena, спасибо за пожелание)

[Genri_Rus]

Ankhena, доброго времени суток, а если добавить для класса:
.list__item-name{white-space: nowrap;}, то получается моя задумка
Однако как понял это неправильное решение, можно ли как-то сделать вот так без white-space?

показать

[Ankhena]

Genri_Rus, нет, нельзя.
Тексы ведут себя именно так.
Можно навставлять br, чтобы, наоборот, был принудительный перенос.

[Genri_Rus]

Ankhena, либо делать фиксированную ширину?
Просто мне хотелось, чтобы этот отступ был всегда 20px и динамически подстраивался под название характеристик.

[Ankhena]

Genri_Rus,
1. Список определений это один список, а не три, как у вас.
2. В коде пишете 10 border-spacing: 10px 20px;, а на словах говорите что вам нужен горизонтальный 20px
3. Для dt вы пишете сначала table-cell, потом inline-block (правда, не срабатывающий из-за специфичности). Хорошо бы определиться.
4. .list__item dt, dd странный селектор.
dt берете только те, которые внутри .list__item, а dd все. Как-так? С чего такая логика?
И ниже всё равно обращаетесь к ним по классу, так зачем выше по тегам?
Вам бы разобраться с этой кашей.

Просто мне хотелось, чтобы этот отступ был всегда 20px и динамически подстраивался под название характеристик.

Тогда не ясно чем вам не нравится white-space

[Genri_Rus]

Ankhena,

1. Список определений это один список, а не три, как у вас.

Вы имеете ввиду вот так?

<dl class="list">
	<dt class="list__item-name">Название</dt>
	<dd class="list__item-value">Значение</dd>
	<dt class="list__item-name">Название</dt>
	<dd class="list__item-value">Значение</dd>
	<dt class="list__item-name">Название</dt>
	<dd class="list__item-value">Значение</dd>
	<dt class="list__item-name">Название</dt>
	<dd class="list__item-value">Значение</dd>
</dl>

[Ankhena]

Genri_Rus, да, именно так

[Genri_Rus]

Ankhena, понял.
А как теперь быть: пример?
Уже таблица тут не подойдёт?

[Ankhena]

Genri_Rus, гридами...

Уже таблица тут не подойдёт?

Пары dt и dd можно оборачивать в div.