Как заставить 3 кнопки отображаться в одной строке равномерно на всех экранах?

#html #css

#HTML #css

Вопрос:

У меня 3 кнопки отображаются подряд. Я ненавижу, когда я просматриваю его на меньшем экране, это заставляет 3-ю перейти на новую строку.

введите описание изображения здесь

Есть ли способ предотвратить это, используя ширину в % ? 33.333% (поскольку их 3.)

Я пробовал это локально, и, похоже, это не работает.

 <h1>

    <a href="/norden/create/poop" class="btn btn-md btn-warning"> poop <img class="logIcon" src="/assets/be/img/norden/poop.png" /> </a> 

    <a href="/norden/create/pee" class="btn btn-md btn-info"> pee <img class="logIcon" src="/assets/be/img/norden/pee.png" /> </a> 

    <a href="/norden/create/feed" class="btn btn-md btn-success"> feed <img class="logIcon" src="/assets/be/img/norden/feed.png" /> </a>


</h1>   
 

Ответ №1:

к h1 добавьте эти стили

 /*your proper h1 selector*/ {
    display: flex;
    justify-content: space-between;  /* or space-around or space-evenly depending on your preference */
}
 

Если вы хотите, чтобы он отображался на очень маленьких экранах, добавьте flex-wrap: wrap; также