如何使無序列表在移動視圖上響應？
[英]How to make unordered list responsive on mobile view?
問題描述
我希望鏈接 email、LinkedIn 和 GitHub 能夠直接在標題底部做出響應，讓我們在移動視圖中進行連接。 此外，我希望在移動視圖中 200px 的邊距頂部沒有。 為新手問題道歉。
@media only screen and (max-width: 1200px) { footer.content-container { margin-left: 10px; margin-right: 10px; } }.footer { grid-area: footer; margin-top: 38px; margin-left: 10%; margin-right: 10%; height: 700px; margin-bottom: 100px; }.footer-text { padding: 200px 100px; font-family: "Khula", sans-serif; font-weight: 600; font-size: 80px; color: #bbbbbb; line-height: 80px; letter-spacing: -1px; display: inline-block; }.footer-contact { font-family: "Khula", sans-serif; font-weight: 600; font-size: 35px; color: #222222; line-height: 50px; letter-spacing: -1px; text-decoration: none; padding-top: 0px; margin-left: 60px; margin-right: 60px; }.footer-text-color { color: #222222; } ul { list-style-type: none; text-decoration: none; margin-top: 200px; float: right; }
<footer class="content-container footer"> <div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div> <ul> <li><a href=about.html class="footer-contact">Email</a></li> <li><a href=projects.html class="footer-contact">LinkedIn</a></li> <li><a href=contact.html class="footer-contact">GitHub</a></li> </ul> </footer>
1 個解決方案
解決方案1
0 2021-12-27 09:13:42
將此添加到您的 css：
@media only screen and (max-width: 845px) {
.footer-text {
padding-bottom: 0;
}
ul {
margin-top: 0;
float: unset;
}
}
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Document</title> <style> @media only screen and (max-width. 1200px) { footer:content-container { margin-left; 10px: margin-right; 10px. } }:footer { grid-area; footer: margin-top; 38px: margin-left; 10%: margin-right; 10%: height; 700px: margin-bottom; 100px. }:footer-text { padding; 200px 100px: font-family, "Khula"; sans-serif: font-weight; 600: font-size; 80px: color; #bbbbbb: line-height; 80px: letter-spacing; -1px: display; inline-block. }:footer-contact { font-family, "Khula"; sans-serif: font-weight; 600: font-size; 35px: color; #222222: line-height; 50px: letter-spacing; -1px: text-decoration; none: padding-top; 0px: margin-left; 60px: margin-right; 60px. }:footer-text-color { color; #222222: } ul { list-style-type; none: text-decoration; none: margin-top; 200px: float; right: } @media only screen and (max-width. 845px) {:footer-text { padding-bottom; 0: } ul { margin-top; 0: float; unset. } } </style> </head> <body> <footer class="content-container footer"> <div class="footer-text"> Let's <br /> <span class="footer-text-color">Connect</span> </div> <ul> <li><a href="about.html" class="footer-contact">Email</a></li> <li><a href="projects.html" class="footer-contact">LinkedIn</a></li> <li><a href="contact.html" class="footer-contact">GitHub</a></li> </ul> </footer> </body> </html>
模態對移動設備沒有響應，如何使其在移動設備上響應？
[英]Modal is not responsive for mobile, How to make it responsive on mobile?
如何使 6 個選項卡響應引導程序上的桌面和移動視圖？
[英]how to make 6 tabs are responsive for Desktop and mobile view on bootstrap?
如何像瀏覽器那樣在 html 元素內部制作移動響應視圖？
[英]How to make mobile responsive view as browsers does inside of html element?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.