Задать вопрос
@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>
  • Вопрос задан
  • 128 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
PHP-разработчик
FoodSoul • Калининград
от 180 000 до 250 000 ₽
Специалист технической поддержки (чат)
WebSoft
от 50 000 до 70 000 ₽
Frontend Developer (React + Node.js)
Alfabet Service
от 1 000 до 2 000 $
Ещё вакансии