HTML CSS 網站不移動導航欄

Question

我的 CSS 樣式表似乎不起作用？

有誰知道為什么？

代碼：

 /* 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>

Answer 1

如果可能，您能否具體說明預期的結果或試圖達到的結果？
如果您想讓導航“粘性”，即使用戶向下滾動頁面，它也始終對用戶可見，那么作為一個選項，您可以嘗試添加到 your.navbar class CSS 這個：

.navbar {
    position: fixed;
    width: 100%;
}

Answer 2

如果您嘗試將 nabber 放在屏幕的左上角，則可以從“導航欄”class (.navbar) 中刪除padding: 20% 。

HTML CSS 網站不移動導航欄

問題描述

2 個解決方案

解決方案1
0 2021-02-21 04:17:33

解決方案2
0 2021-02-21 05:18:48

HTML CSS 網站不移動導航欄

問題描述

2 個解決方案

解決方案1 0 2021-02-21 04:17:33

解決方案2 0 2021-02-21 05:18:48

解決方案1
0 2021-02-21 04:17:33

解決方案2
0 2021-02-21 05:18:48