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

Question

[Максим]

Необходимо сверстать подобие таблицы, вида ключ -> значение. Выглядит это вот так:

Пробовал сделать таблицей, в 3 столбца, где средний с 100% шириной и border dotted снизу, но в этом случае если либо ключ, либо значения имеют пробелы, слова переносятся и получается не то.

Answer 1

[Ilya Korablev]

Попробуйте добавить к tr dotted. На тостере был подобный вопрос, уже ищу его.

UPD: не буду давать ссылку на вопрос, сразу дам ссылку на пример.

Answer 2

[Павел Кононенко]

но в этом случае если либо ключ, либо значения имеют пробелы, слова переносятся и получается не то.

white-space: nowrap;

Answer 3

[Матвей Мамонов]

Можно попробовать сделать один div с нижней границей точечками (dotted).
С левой его стороны наложить span со словом, а с правой - со значением.

<div>
    <span>Игровой жанр</span>
    <span>Action</span>
</div>

div {
border-bottom: 1px dotted #000;
}

span:first-of-type {
float: left;
}

span:last-of-type {
float: right;
}

Comments

[Матвей Мамонов]

Естественно, еще доработать много чего надо.
Это так, идея.