我正在制作一個頁腳部分，如果螢屏寬度超過 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>© W<strong>3</strong>S • 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;”等等，但沒有任何效果。
有什么建議？
uj5u.com熱心網友回復：
忘記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>© W<strong>3</strong>S • 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>uj5u.com熱心網友回復：
采用float: none
雖然我建議按照dippas 的回答display: flex中提到的方式使用，但這里是使用s.float
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>© W<strong>3</strong>S • 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>© W<strong>3</strong>S • 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/446908.html
下一篇：如何使我的標題布局是這樣的？