1

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

1 ответ 1

6

Маркированный список, как вариант решения.

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.