Как можно продлить линию от одного блока до другого?

Question

Арслан

html , css

Как можно продлить линию от одного блока до другого?

Как можно создать линию, соединяющую блок с текстом и цену, с учетом того, что ширина линии может варьироваться для разных элементов? Я пробовал использовать тег <span>, но это требует индивидуальной стилизации для каждой линии. Есть ли способ сделать такую линию адаптивной? Или, возможно, более эффективно использовать псевдоэлементы для этого? В таком случае, как можно сделать одну адаптивную линию для всех элементов? <br/> <br/> Вот пример того, как это должно выглядеть: <br/>

1 марта 2025 г. 12:04

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для создания адаптивной линии, соединяющей блок с текстом и ценой, вы можете использовать CSS Flexbox в комбинации с псевдоэлементами. Это позволит вам сделать линию адаптивной, не требуя индивидуальной стилизации для каждой линии.

Ниже приведён пример, который демонстрирует, как это можно реализовать:

### HTML

```html
<div class="container">
    <div class="item">
        <span class="text">Текст 1</span>
        <span class="price">1000 руб.</span>
    </div>
    <div class="item">
        <span class="text">Текст 2</span>
        <span class="price">2000 руб.</span>
    </div>
    <div class="item">
        <span class="text">Текст 3</span>
        <span class="price">3000 руб.</span>
    </div>
</div>
```

### CSS

```css
.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Для выравнивания элементов по левому краю */
}

.item {
    position: relative; /* Позволяет позиционировать псевдоэлементы относительно этого блока */
    margin-bottom: 20px; /* Отступ между элементами */
}

.text {
    margin-right: 10px; /* Отступ между текстом и ценой */
}

.price {
    position: relative; /* Обеспечивает возможность позиционирования псевдоэлементов относительно цены */
}

.item::after {
    content: "";
    position: absolute;
    top: 50%; /* Центрируйте линию по вертикали */
    left: calc(100% + 10px); /* Левый отступ для линии */
    width: 100%; /* Задает ширину линии */
    height: 2px; /* Толщина линии */
    background: #000; /* Цвет линии */
    transform: translateY(-50%); /* Центрирует линию по вертикали */
}
```

### Объяснение кода:

1. **Flexbox**: Контейнер `.container` используется для выстраивания элементов в столбик. Это позволяет адаптировать размещение элементов под разные размеры.
  
2. **Псевдоэлементы**: Используется `::after`, чтобы создать линию после каждого элемента списка. Это позволяет не добавлять дополнительные HTML-элементы для линий.

3. **Расположение и размеры**: Ширина линии устанавливается как `width: 100%`, что делает её адаптивной, и она будет растягиваться на всю доступную ширину. `left: calc(100% + 10px)` устанавливает линию на определённое расстояние от блока с ценой.

4. **Центрирование**: Используется `transform: translateY(-50%)`, чтобы выровнять линию по центру относительно высоты блока с ценой.

Используя этот подход, вы сможете иметь опциональные соединительные линии между текстом и ценой, которые будут автоматически адаптироваться к изменению ширины текста и цен.

Answer 2

Вопрос решен:  menu__item-desc была задана ширина 100%, а линии распределились по ширине при помощи свойства flex-grow: 1.