Как сверстать блок с адаптивными линиями?

Question

Как сверстать блок с адаптивными линиями?

Рейтинг: 0Ответов: 3Опубликовано: 17.08.2023

как сверстать блок, где линия,идущая между блоками, была адаптивной, в зависимости от текста слева?

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 2

Как сверстать блок с адаптивными линиями?

Старая, добрая таблица...

table {
  width: 500px;
}
td:nth-child(odd) {
  width: 1%;
  white-space: nowrap;
}
td:nth-child(2) {
  border-bottom: 1px dotted red;
}

<table>
  <td>Песок карьерный</td>
  <td></td>
  <td>От 100р</td>
</table>
<table>
  <td>Песок</td>
  <td></td>
  <td>От 10р</td>
</table>

Answer 2

▲ 2

Если стили правой и левой части одинаковы, то достаточно добавить элемент-разделитель в каждую строку, а самой строке установить свойство display: flex;

ul {
  list-style: none;
  padding: 0;
}

li {
  width: 100%;
  display: flex;
}

li span {
  border-bottom: 1px dotted #999;
  flex-grow: 1;
}

<ul>
  <li>Песок карьерный 191<span></span> от 160</li>
  <li>Песок карьерный <span></span> от 160</li>
  <li>Песок намывной <span></span> от 170</li>
</ul>

Если же стили отличаются или присутствуют какие-то специфические цели, то оборачиваем каждую сторону в отдельный элемент:

ul {
  list-style: none;
  padding: 0;
}
li {
  width: 100%;
  display: flex;
}

li span:nth-of-type(1) {
  font-weight: bold;
}

li span:nth-of-type(2) {
  border-bottom: 1px dotted #999;
  flex-grow: 1;
}

li span:nth-of-type(3) {
  color: #060;
}

<ul>
  <li><span>Песок карьерный 191</span> <span></span> <span>от 160</span></li>
  <li><span>Песок карьерный</span> <span></span> <span>от 160</span></li>
  <li><span>Песок намывной</span> <span></span> <span>от 170</span></li>
</ul>

Answer 3

▲ 0

Вот так это можно реализовать:

.product {
  padding: 10px;
  margin: 10px;
}
.product li {
  align-items: baseline;
  display: flex;
  margin-bottom: 20px;
}
.product li::before {
  content: '';
  border-bottom: 2px dotted black;
  flex-grow: 1;
  order: 2;
  margin: 0 5px;
}
.product .price {
  order: 3;
}
.product .price .color {
  color: #44944A;
  font-weight: bold;
}

<div>
<ul class="product">
  <li>Песок карьерный 1.91<span class="price">От <span class="color">160 ₽</span></span></li>
  <li>Песок карьерный 1.40<span class="price">От <span class="color">160 ₽</span></span></li>
  <li>Песок карьерный 1.10<span class="price">От <span class="color">160 ₽</span></span></li>
  <li>Песок намывной<span class="price">От <span class="color">250 ₽</span></span></li>
</ul>
</div>

Как сверстать блок с адаптивными линиями?

Ответы