Почему свойство float: CSS не работает в запросах @media?

Я делаю нижний колонтитул, где, если экран шире 815 пикселей, некоторые ссылки будут справа, но когда экран меньше 815 пикселей, я хочу, чтобы они располагались по центру в новой строке.

Я пытался сделать это с помощью запросов @media, а также искал решение, но пока не нашел подходящего.

Мой код CSS на данный момент:

footer {
    padding: 25px;
}

footer #right {
    float: right;
    display: block;
}

@media screen and (max-width: 815px) {
    footer {
        width: 100%;
        text-align: center;
    }
    footer #right {
        float: left;
    }
}

<footer>
<h3>&copy; W<strong>3</strong>S &bull; All Rights Reserved <span id = "right"><a href = "page/support/help_center.htm">Help Center</a> | <a href = "page/support/about.htm">About</a> | <a href = "page/blog/blog.htm">Blog</a></span></h3>
</footer>

Я пробовал использовать "width: 100%;", "float: center;" и многие другие, но ничего не получалось.

Какие-либо предложения?

Существует исчезающе мало причин для использования float в 2022 году, и если вы проверите диапазон в инструментах разработки браузера, вы увидите, что правило float применяется в соответствии с медиа-запросом. Проблема в том, что float не делает того, что вы пытаетесь сделать.

— 22.03.2022 19:33

Использование float в настоящее время считается плохой практикой. Есть лучшие альтернативы, такие как flexbox.

— 22.03.2022 19:33

html css

22.03.2022 19:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Забудьте floats, используйте flexbox, а также попробуйте использовать подход, ориентированный на мобильные устройства (min-width)

footer {
  text-align: center;
}

@media screen and (min-width: 816px) {
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

<footer>
  <h3>&copy; W<strong>3</strong>S &bull; All Rights Reserved</h3>

  <span id = "right">
    <a href = "page/support/help_center.htm">Help Center</a> | 
    <a href = "page/support/about.htm">About</a> | 
    <a href = "page/blog/blog.htm">Blog</a>
  </span>
</footer>

22.03.2022 19:33

Ответ принят как подходящий

Используйте `float: none`

Хотя я бы рекомендовал использовать display: flex, как указано в ответ диппы, вот как вы можете это сделать, используя floats.

footer {
    padding: 25px;
}

footer #right {
    float: right;
    display: block;
}

@media screen and (max-width: 815px) {
    footer {
        /*  Unnecessary, since footer normally has display: block 
 which is width: 100% by default */
        /* width: 100%; */
        text-align: center;
    }
    footer #right {
        float: none;
        width: 100%;
    }
}

<footer>
<h3>&copy; W<strong>3</strong>S &bull; All Rights Reserved <span id = "right"><a href = "page/support/help_center.htm">Help Center</a> | <a href = "page/support/about.htm">About</a> | <a href = "page/blog/blog.htm">Blog</a></span></h3>
</footer>

Кроме того, использование подхода Mobile-first CSS для сокращения строк кода:

footer {
  text-align: center;
    padding: 25px;
}

footer #right {
  display: block;
}

@media screen and (min-width: 815px) {
  
  footer #right {
    float: right;
  }
}

<footer>
  <h3>&copy; W<strong>3</strong>S &bull; All Rights Reserved <span id = "right"><a href = "page/support/help_center.htm">Help Center</a> | <a href = "page/support/about.htm">About</a> | <a href = "page/blog/blog.htm">Blog</a></span></h3>
</footer>

22.03.2022 19:40