Привет всем. Есть такой макет:
Это блок, который я вставляю с 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;
}
Но у меня линия смещает текст справа. Не пойму, как правильно сделать, так чтобы эта табуляция с подчеркиванием работала корректно, при том что текст должен примагничиваться к краям.
Спасибо за внимание.
Средний
