Задать вопрос
@Tanri09YT
html

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

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

Вот код, который я написал:
<html>
<div class="main_content" style="position: relative; left: 15px;">
    <a href="" class="average_buttons" id="hidden_donate"><b style="margin-top: 7px;">Донат услуги</b></a>
    <a href="" class="average_buttons2" id="hidden_donate2"><b style="margin-top: 7px;">Валюта</b></a>
    <a href="" class="average_buttons3" id="hidden_donate3"><b style="margin-top: 7px;">Прочие услуги</b></a>
</div>
</html>


<style>
        .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;
            color: white;
            width: 20%;
            height: 40px;
            text-decoration: none;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 20px;
            margin-left: 285px;
            position: absolute;
            left: 350px;
        }


        @media (max-width: 768px) {
        .average_buttons {
            font-size: 20px;
            background-color: #f5b759;
            color: white;
            width: 25%;
            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: 25%;
            height: 40px;
            text-decoration: none;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 20px;
            margin-left: 20px;
            position: absolute;
            left: 320px;
        }
        .average_buttons3 {
            font-size: 20px;
            background-color: #fcd292;
            color: white;
            width: 30%;
            height: 40px;
            text-decoration: none;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 20px;
            margin-left: 20px;
            position: absolute;
            left: 630px;
            }
        }


        @media (min-width: 1120px) {

        .average_buttons {
            font-size: 20px;
            background-color: #f5b759;
            color: white;
            width: 22%;
            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: 22%;
            height: 40px;
            text-decoration: none;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 20px;
            margin-left: 30px;
            position: absolute;
            left: 320px;
        }

        .average_buttons3 {
            font-size: 20px;
            background-color: #fcd292;
            color: white;
            width: 22%;
            height: 40px;
            text-decoration: none;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 20px;
            margin-left: 285px;
            position: absolute;
            left: 400px;
            }
         }
</style>
  • Вопрос задан
  • 130 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Помогут разобраться в теме Все курсы
  • Нетология
    Фронтенд-разработчик
    11 месяцев
    Далее
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка
    3 месяца
    Далее
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
HTML-верстальщик
ТехСофт
от 60 000 до 60 000 ₽
Frontend-разработчик (vanilla JS, high-load)
Karma8
от 200 000 ₽
Junior SEO-специалист
MST
от 600 до 800 $
Ещё вакансии