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

Необходимо сверстать подобие таблицы, вида ключ -> значение. Выглядит это вот так:
sAtcOyp.png
Пробовал сделать таблицей, в 3 столбца, где средний с 100% шириной и border dotted снизу, но в этом случае если либо ключ, либо значения имеют пробелы, слова переносятся и получается не то.
  • Вопрос задан
  • 213 просмотров
Решения вопроса 1
swipeshot
@swipeshot
Учусь на ошибках.
Попробуйте добавить к tr dotted. На тостере был подобный вопрос, уже ищу его.

UPD: не буду давать ссылку на вопрос, сразу дам ссылку на пример.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
premas
@premas
Full-stack web-developer
но в этом случае если либо ключ, либо значения имеют пробелы, слова переносятся и получается не то.

white-space: nowrap;
Ответ написан
Комментировать
eucalipt
@eucalipt
Самоделкин.
Можно попробовать сделать один 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;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы