Как можно реализовать отображение точек в линии между двумя блока в центре?

Question

Ринат

css

Как можно реализовать отображение точек в линии между двумя блока в центре?

Я создал блоки и стадии, и теперь хочу добавить точки между этапами 1, 2 и 3. Однако точки расположены не в идеальном центре промежутков, и мне хотелось бы, чтобы они были более заметны между блоками. Я прикрепил скриншоты с тем, как я хотел бы, чтобы это выглядело. <br/> <br/> <b>Рабочая схема здесь:</b> <br/> <a href="https://codepen.io/AXOT/pen/BagOMme" rel="nofollow">https://codepen.io/AXOT/pen/BagOMme</a> <br/> <br/> Вот как это получилось у меня: <br/>

1 сентября 2024 г. 8:04

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

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

Answer 1

Чтобы добавить точки между блоками (стадиями) в вашей схеме и убедиться, что они расположены в центре промежутков между этими блоками, вам необходимо следовать нескольким шагам. Предположим, что вы используете HTML и CSS.

Вот примерный код, который поможет вам правильно расположить точки между блоками:

### HTML

```html
<div class="container">
    <div class="stage">
        <div class="stage-block">Этап 1</div>
        <div class="dot"></div>
    </div>
    <div class="stage">
        <div class="stage-block">Этап 2</div>
        <div class="dot"></div>
    </div>
    <div class="stage">
        <div class="stage-block">Этап 3</div>
    </div>
</div>
```

### CSS

```css
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 50px; /* расстояние между блоками */
}

.stage {
    position: relative;
    text-align: center;
}

.stage-block {
    padding: 20px;
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

.dot {
    width: 10px; /* размер точки */
    height: 10px;  
    background-color: red; /* цвет точки */
    border-radius: 50%; 
    position: absolute;
    top: 50%; /* вертикальное центрирование */
    left: 100%; /* перемещение после блока */
    margin-left: -5px; /* чтобы центрировать точку */
    transform: translateY(-50%); /* центрирование точки по вертикали */
}

.stage:nth-child(3) .dot {
    display: none; /* скрываем точку после последнего этапа */
}
```

### Объяснение:

1. **HTML Структура**: Убедитесь, что вы создали блоки для каждого этапа и добавили элементы `.dot` между ними.
2. **Flexbox**: Используем `flexbox`, чтобы расположить блоки в ряд. Свойства `align-items` и `justify-content` помогут сделать их центрированными.
3. **Позиционирование точек**: Для точек устанавливаем `position: absolute;`, чтобы иметь возможность размещать их относительно блока с этапом. Используя `left: 100%;`, мы позиционируем точки сразу после блока. `top: 50%;` и `transform: translateY(-50%);` позволяют правильно центрировать точки по вертикали.
4. **Скрытие лишних точек**: Для последнего блока мы скрываем точку, чтобы не отображать ее после последнего этапа.

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

Answer 2

как-то так, идея теоретически верная, но недоведённая до конца