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 that you have read and understand our privacy policy and code of conduct.

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