Как лучше будет сверстать вот такой блок? Снизу есть штрихпунктирная линия, цена может быть разная, то есть по ширине может быть больше или меньше, и нужно, чтобы подчёркивание как-то подстраивалось при смене цены
1 ответ
Маркированный список, как вариант решения.
ul.list {
padding: 0;
margin: 0;
list-style-type: none;
}
li {
border-bottom: 1px dashed #cecece;
position: relative;
padding: 0;
margin-bottom: 5px;
}
li span {
background-color: #FFF;
margin: 0;
}
li span.text,
li span.num {
bottom: -5px;
}
span.text {
position: relative;
margin-right: 7em;
padding-right: 2px;
}
span.num {
position: absolute;
right: 0;
padding-left: 3px;
}
<ul class="list">
<li>
<span class="text">Field 1: </span>
<span class="num"><b>111 грн</b></span>
</li>
<li>
<span class="text">Bigger field: </span>
<span class="num"><b>2222222222 руб</b></span>
</li>
<li>
<span class="text">Long long lorem ipsum:</span>
<span class="num"><b>33 usd</b></span>
</li>
</ul>