为什么 float: CSS 属性在@media 查询中不起作用？

Question

我正在制作一个页脚部分，如果屏幕宽度超过 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;”等等，但没有任何效果。

有什么建议么？

Answer 1

忘记float s，使用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>

Answer 2

使用float: none

虽然我建议使用display: flex ，如dippas 的回答中所述，但这里是使用float s 的方法。

 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>

此外，使用移动优先 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>