如何制作一个居中但响应迅速的 html 导航栏
[英]How to make an html nav bar that is centered but also responsive
问题描述
I am trying to create a nav bar for my website that is centered but also responsive.
我正在尝试为我的网站创建一个居中但响应迅速的导航栏。 If you run my code snippet and look at it in the full page and you make the width of the website really small you will notice that the links go away and a icon appears on the top right corner.如果您运行我的代码片段并在整个页面中查看它，并且您使网站的宽度变得非常小，您会注意到链接 go 离开了，并且右上角出现了一个图标。 When you click on the icon the links will reappear in a different fashion.当您单击图标时，链接将以不同的方式重新出现。 Ive tried numerous different things to try to center my nav bar.我尝试了许多不同的方法来尝试使我的导航栏居中。 However, it mostly just messed up my nav bar completely.然而，它主要只是完全搞砸了我的导航栏。 I know how to center a nav bar without it being responsive.我知道如何在不响应的情况下使导航栏居中。 But I really like how its responsive as I think it would look really good on a mobile phone.但我真的很喜欢它的响应速度，因为我认为它在手机上看起来真的很棒。 If anyone could give me some tips it would be much appreciated!如果有人能给我一些建议，将不胜感激！
.topnav { overflow: hidden; background-color: #333; }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { background-color: #ddd; color: black; }.topnav a.active { background-color: #4CAF50; color: white; }.topnav.icon { display: none; } @media screen and (max-width: 600px) {.topnav a:not(:first-child) {display: none;}.topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) {.topnav.responsive {position: relative;}.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; } } <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#news" class="active">HOME</a> <a href="#news">SERVICES</a> <a href="#contact">PRODUCTS</a> <a href="#news">CONTACT</a> <a href="#news">CALCULATORS</a> <a href="javascript;void(0)." class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document;getElementById("myTopnav"). if (x.className === "topnav") { x;className += " responsive". } else { x;className = "topnav"; } } </script> </body> </html>
3 个解决方案
解决方案1
0 2020-07-20 05:17:34
Have you tried adding the following to to your head ?您是否尝试过将以下内容添加到您的head中？
<meta name="viewport" content="width=device-width, initial-scale=1">
My apologies.我很抱歉。 I didn't make it to my desktop in time to edit my response.我没有及时到我的桌面编辑我的回复。
解决方案2
0 2020-07-20 05:19:35
If by centering you mean the tag elements inside the collapsed bar, you are setting "text-align" property to "left" by changing it to "center", it will center the navbar items.如果居中是指折叠栏中的标签元素，则通过将“text-align”属性更改为“center”将其设置为“left”，它将使导航栏项目居中。
- You are using same media query twice no need to do that, put the other code in single query as you are not altering screen width.您使用相同的媒体查询两次，无需这样做，将其他代码放在单个查询中，因为您没有更改屏幕宽度。
@media screen and (max-width: 600px) {.topnav a:not(:first-child) { display: none; }.topnav a.icon { float: right; display: block; }.topnav.responsive { position: relative; }.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: center; } }
解决方案3
0 已采纳 2020-07-20 05:27:43
Like this?像这样？
.topnav { overflow: hidden; background-color: #333; }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { background-color: #ddd; color: black; }.topnav a.active { background-color: #4CAF50; color: white; }.topnav.icon { display: none; } @media screen and (max-width: 600px) {.topnav a:not(:first-child) { display: none; }.topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) {.topnav.responsive { position: relative; }.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; } } @media screen and (min-width: 600px) {.topnav { display: flex; justify-content: center; } }
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#news" class="active">HOME</a> <a href="#news">SERVICES</a> <a href="#contact">PRODUCTS</a> <a href="#news">CONTACT</a> <a href="#news">CALCULATORS</a> <a href="javascript;void(0)." class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document;getElementById("myTopnav"). if (x.className === "topnav") { x;className += " responsive". } else { x;className = "topnav"; } } </script> </body> </html>
@media screen and (min-width: 600px) {
.topnav {
display: flex;
justify-content: center;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.