@DmitryLife

Как реализовать табуляцию на CSS?

Привет всем. Есть такой макет:
5d5fa89498d8a154766870.jpeg

Это блок, который я вставляю с 2-мя другими через display: flex; и justify-content: space-between;
Реализовал его след образом:
<ul>
	<li><span>Длина </span><div class="border_ul"></div><span class="s_h">3 м</span></li>
	<li><span>Ширина</span></span><div class="border_ul"></div><span class="s_h">2 м</span></li>
	<li><span>Высота</span></span><div class="border_ul"></div><span class="s_h">2.1 м</span></li>
	<li><span>Объем</span></span><div class="border_ul"></div><span class="s_h">10 м3</span></li>
	<li><span>Грузоподъемность</span></span><div class="border_ul"></div><span class="s_h">1.5 т</span></li>
</ul>


Все стили писать не буду, напишу ключевые:
.info_auto ul li{
	list-style: none;
	display: flex;
	justify-content: space-between;
	padding-bottom: 5px;
	margin-bottom: 5px;
	padding-left: 5px;
}

.border_ul{
	width: 100%;
	border-bottom: 1px solid red;	
}

.s_h {
	height: 16px;
	overflow: hidden;
}


Но у меня линия смещает текст справа. Не пойму, как правильно сделать, так чтобы эта табуляция с подчеркиванием работала корректно, при том что текст должен примагничиваться к краям.

Спасибо за внимание.
  • Вопрос задан
  • 1056 просмотров
Решения вопроса 4
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Вариантов много. Например, с помощью отдельного элемента (позволяет использовать рисунок на фоне):


Самый простой вариант без лишней разметки. Граница на li, а у span залить фон цветом, чтобы перекрыть линию там, где текст:


Можно псевдоэлементом сделать как для первого, так и второго варианта. Ну и так далее. Можно тут вообще костылей напридумывать, кстати, но это отдельная тема. Если не нужен фон, кроме однородного фона — делайте границей и заливкой цвета.

Извините, мне с телефона лень писать, поэтому дальше сами.
Ответ написан
Комментировать
@FabiBoom

И это один из вариантов только. Можно еще придумать)
Ответ написан
Комментировать
@WhiteBearDev
Бэтмэн
Добрый день!

Пропишите в селектор .s_h такие свойства

.s_h {
  height: 16px;
  overflow: hidden;
  flex-grow: 0;
  flex-shrink: 0;
}
Ответ написан
Комментировать
Brad9aga
@Brad9aga
особо не заморачивался

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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