Как обеспечить, чтобы теги «a» не перекрывались друг с другом при изменении размера экрана?

Question

Родион

html , css

Как обеспечить, чтобы теги «a» не перекрывались друг с другом при изменении размера экрана?

Как предотвратить наложение кнопок при изменении размера экрана? Вот мой код: <br/> <pre><code class="html">&lt;html&gt;
&lt;div class="main_content" style="position: relative; left: 15px;"&gt;
    &lt;a href="" class="average_buttons" id="hidden_donate"&gt;&lt;b style="margin-top: 7px;"&gt;Донат услуги&lt;/b&gt;&lt;/a&gt;
    &lt;a href="" class="average_buttons2" id="hidden_donate2"&gt;&lt;b style="margin-top: 7px;"&gt;Валюта&lt;/b&gt;&lt;/a&gt;
    &lt;a href="" class="average_buttons3" id="hidden_donate3"&gt;&lt;b style="margin-top: 7px;"&gt;Прочие услуги&lt;/b&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/html&gt;</code></pre> <br/> <br/> <pre><code>&lt;style&gt;
        .average_buttons {
            font-size: 20px;
            background-color: #f5b759;
            color: white;
            width: 20%;
            height: 40px;
            text-decoration: none;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 20px;
            position: absolute;
            left: 0;
        }

        .average_buttons2 {
            font-size: 20px;
            background-color: #fcd292;
            color: white;
            width: 20%;
            height: 40px;
            text-decoration: none;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 20px;
            margin-left: 30px;
            position: absolute;
            left: 300px;
        }

        .average_buttons3 {
            font-size: 20px;
            background-color: #fcd292;

19 января 2025 г. 15:04

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

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

Answer 1

Чтобы предотвратить наложение кнопок при изменении размера экрана, лучше использовать свойства Flexbox или Grid для укладки элементов, а не абсолютное позиционирование. Это позволит вам создать адаптивный интерфейс, который будет корректно реагировать на изменение размера экрана.

Вот один из возможных вариантов вашего кода, используя Flexbox:

```html
<html>
<head>
    <style>
        .main_content {
            display: flex;
            justify-content: flex-start; /* Выравниваем кнопки по горизонтали */
            flex-wrap: wrap; /* Позволяет кнопкам переноситься на новую строку при нехватке места */
            margin-left: 15px; /* Отступ слева для всего контейнера */
        }
        
        .average_buttons, .average_buttons2, .average_buttons3 {
            font-size: 20px;
            color: white;
            width: 20%; /* Ширина кнопок, чтобы они были равномерными */
            height: 40px;
            text-decoration: none;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center; /* Центрируем текст по вертикали */
            margin: 10px; /* Отступ между кнопками */
        }

        .average_buttons {
            background-color: #f5b759;
        }

        .average_buttons2, .average_buttons3 {
            background-color: #fcd292;
        }
    </style>
</head>
<body>
    <div class="main_content">
        <a href="#" class="average_buttons" id="hidden_donate"><b>Донат услуги</b></a>
        <a href="#" class="average_buttons2" id="hidden_donate2"><b>Валюта</b></a>
        <a href="#" class="average_buttons3" id="hidden_donate3"><b>Прочие услуги</b></a>
    </div>
</body>
</html>
```

### Что изменилось:
1. **Flexbox:** Для родительского элемента `.main_content` добавлено свойство `display: flex;` с `flex-wrap: wrap;`, что позволяет кнопкам автоматически переноситься на новую строку, если недостаточно места на экране.
   
2. **Удаление абсолютного позиционирования:** Кнопки больше не используют `position: absolute;`, что позволяет им быть более гибкими и адаптивными.

3. **Стили кнопок:** Все кнопки имеют одинаковые стили, кроме разных цветов фона.

Теперь кнопки будут корректно отображаться и не будут перекрывать друг друга при изменении размера экрана. При уменьшении экрана кнопки будут упорядочиваться в несколько строк, если они не помещаются в одну.