Как лучше сверстать вот такой блок

190

15 июля 2018, 06:30

Как лучше будет сверстать вот такой блок? Снизу есть штрихпунктирная линия, цена может быть разная, то есть по ширине может быть больше или меньше, и нужно, чтобы подчёркивание как-то подстраивалось при смене цены

Answer 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>