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

Question

[DmitryLife]

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


Это блок, который я вставляю с 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;
}

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

Спасибо за внимание.

Comments

[Brad9aga]

вы прежде чем ctrl+c ctrl+v делать, код вообще проверяете ?

[Rustam Bainazarov]

Вариантов много. Например, с помощью отдельного элемента (позволяет использовать рисунок на фоне):


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


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

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

Answer 1

[Rustam Bainazarov]

Вариантов много. Например, с помощью отдельного элемента (позволяет использовать рисунок на фоне):


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


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

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

Answer 2

[FabiBoom]

И это один из вариантов только. Можно еще придумать)

Answer 3

[WhiteBearDev]

Добрый день!

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

.s_h {
  height: 16px;
  overflow: hidden;
  flex-grow: 0;
  flex-shrink: 0;
}

Answer 4

[Brad9aga]

особо не заморачивался