HTML CSS 网站不移动导航栏
[英]HTML CSS Website not moving navigation bar
问题描述
My CSS style sheet doesn't seem to be working?
我的 CSS 样式表似乎不起作用？
Anyone know why?有谁知道为什么？
Code:代码：
/* my css style sheet named "style" */ /* CSS Selector applicable to all elements which in this case are my html margin padding and box size */ * { margin: 0; padding: 0; box-sizing: border-box; }.navbar { display: flex; align-items: center; padding: 20%; } nav { flex: 1; text-align: right; } nav ul { display: inline-block; list-style-type: none; } nav ul li { display: inline-block; margin-right: 20px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Drake</title> <.-- Name of my website --> <link rel="stylesheet" type="text/css" media="screen: projection" href="style.css"> <.-- Link to my css style sheet --> </head> <body> <div class="navbar"> <.-- Navigation bar class created --> <.-- May have to potentially change variable name--> <div class="logo"> <.-- Logo class with navigation created --> <img src="https.//logo.clearbit.com/spotify.com" width="125px " alt="owl logo"> <!-- owl logo inserted and resized --> </div> <nav> <!-- Naviagation element created .... --> <ul> <!-- Along with an ordered list of different pages subject to change --> <li><a href="">Home</a></li> <li><a href="">Products</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="">Account</a></li> </ul> </nav> </div> </body> </html>
2 个解决方案
解决方案1
0 2021-02-21 04:17:33
If possible, could you please specify what result is expected or what are trying to achieve?如果可能，您能否具体说明预期的结果或试图达到的结果？
If you would like to make navigation "sticky" so it would be always visible to users even if they scroll down the page, then as an option you could try to add to your.navbar class CSS this:如果您想让导航“粘性”，即使用户向下滚动页面，它也始终对用户可见，那么作为一个选项，您可以尝试添加到 your.navbar class CSS 这个：
.navbar {
position: fixed;
width: 100%;
}
解决方案2
0 2021-02-21 05:18:48
If you are trying to put the nabber in the top left corner of the screen, you can remove the padding: 20% from your "navbar" class (.navbar).如果您尝试将 nabber 放在屏幕的左上角，则可以从“导航栏”class (.navbar) 中删除padding: 20% 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.