網頁無法適應瀏覽器窗口大小

Question

我正在從頭開始制作一個網站，目前我所擁有的只是導航欄。 但是我認為在繼續開發之前，這個問題已經解決了。 每當我最小化瀏覽器時，我的導航欄都不會一直保持直線。 我已包含以下代碼。 我使用的文本編輯器是Brackets，過去一周我嘗試了多種操作，但沒有任何效果。

 //CSS body { margin: 0; background-color: beige; font-family: 'Work Sans', sans-serif; font-weight: 400; } .container { width: 86.5%; margin: 0 auto; } .header { background-color: grey; width: 100%; top: 0px; position: fixed; } .header::after { content: ''; display: table; clear: both; } .logo { float: left; padding: 0.5%; } nav { float: right; position: relative; top: 0px; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-left: 99px; padding-top: 25px; position: relative; }

 //HTML <!doctype html> <html> <head> <link href="MPstyle.css" rel="stylesheet" type="text/css"> <meta charset="UTF-8"> <title>M/P</title> </head> <body> <div class="header"> <div class="container"> <img src="logo.png" alt="logo" class="logo" width="50" height="50"> <nav> <ul> <li> <a href="#">Home</a></li> <li> <a href="#">About</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Contact</a></li> </ul> </nav> </div> </div> </body>

Answer 1

您可能正在尋找這樣的東西。

當我被布局卡住而無法正確放置時，我會在每個元素上添加邊框。 通過這種方式，您可以看到頁面上每個元素的間距，並基於此開始調整CSS屬性以將項目放置在其位置。 顯然，您使用CSS的次數越多，它越容易獲得。 對布局感到滿意后，便刪除邊框。

我所做的調整：

使頁眉全寬，使其覆蓋頁面的整個寬度
給徽標20％的頁面寬度。
剩余空間80％由菜單占用
然后，每個列表項被允許占用20％。

如果您調整頁面大小，則會看到使用百分比將正確分配空間。 希望這對您有所幫助，並祝您在本頁面的其余部分一切順利。

 //CSS body { margin: 0; background-color: beige; font-family: 'Work Sans', sans-serif; font-weight: 400; } .container { margin: 0 auto; } .header { background-color: grey; width: 100%; top: 0px; position: fixed; border: 1px solid black; } .logo { float: left; width: 19%; border: 1px solid blue; } nav { float: right; position: relative; top: 0px; width: 80%; border: 1px solid yellow; } nav ul { margin: 0; padding: 0; list-style: none; width: 100%; text-align: center; } nav li { position: relative; display: inline-block; width: 20%; margin: 1rem 0; border: 1px solid red; }

 //HTML <!doctype html> <html> <head> <link href="MPstyle.css" rel="stylesheet" type="text/css"> <meta charset="UTF-8"> <title>M/P</title> </head> <body> <div class="header"> <div class="container"> <img src="logo.png" alt="logo" class="logo" width="50" height="50"> <nav> <ul> <li> <a href="#">Home</a></li> <li> <a href="#">About</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Contact</a></li> </ul> </nav> </div> </div> </body>

網頁無法適應瀏覽器窗口大小

問題描述

1 個解決方案

解決方案1
0 已采納 2018-08-15 19:50:03

網頁無法適應瀏覽器窗口大小

問題描述

1 個解決方案

解決方案1 0 已采納 2018-08-15 19:50:03

解決方案1
0 已采納 2018-08-15 19:50:03