當屏幕變小時，如何使導航欄堆棧上的元素相互疊加？

Question

例如，當有人使用手機或調整屏幕大小時，如何使導航欄堆棧中的元素相互疊加？ 它對我來說已經有點用了，因為當導航欄中的最后一個元素變小時，它會低於其他元素，但它是 go 向下的唯一一個元素，元素的 rest 只是保持原位一些原因。 這是我的代碼：

 body { margin: 0; padding: 0; } nav { width: 100%; height: auto; position: relative; margin: .4em auto; background-color: white; overflow: hidden; } nav ul { padding: 0%; position: relative; margin: .5em auto; list-style: none; } nav ul li { width: 15%; margin: 0.5%; margin-left: 3%; display: inline; float: left; text-align: center; }.logo img { position: relative; float: left; } nav a { width: 100%; text-decoration: none; color: black; text-align: center; padding: 5%; font-size: 3em; } #navbar ul li a:hover { margin-top: 20px; padding-right: 20px; padding-bottom: 20px; background-color: rgb(173, 12, 7); color: white; }

 <nav> <div class="logo"><a href="#"><img src="CSS/logo.jpg" id="logo" width="250" height="150"></a></div> <div style="width: 1100px; margin: 0 auto;"> <div id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">Store</a></li> <li><a href="faq.html">FAQ</a></li> </ul> </div> </div> </nav>

Answer 1

通過閱讀您的問題，我推斷，當屏幕寬度減小時，您希望導航欄元素一個一個堆疊，如果是這樣，您可以這樣做，但這不是導航欄的工作方式。 我會推薦你第二種方式（滾動過去這個片段）

兩種解決方案都使用 css flexbox 屬性，例如display: flex , flex-wrap: wrap ，第二種解決方案使用屬性flex-direction: column

第一個解決方案：

 body { margin: 0; padding: 0; } #navbar { display: flex; flex-wrap: wrap; width: 100vw; } #navbar > ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; flex: 1 1; padding: 0 0.5rem; } a { color: black; padding: 0.5rem; } #navbar > ul > li:hover > a{ background: black; color: white; }

 <nav> <div style="width: 1100px; margin: 0 auto;"> <div id="navbar"> <div class="logo"> <a href="#"> <img src="/logo.jpg" id="logo" width="70" height="70"> </a> </div> <ul> <li><a href="#">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">Store</a></li> <li><a href="faq.html">FAQ</a></li> </ul> </div> </div> </nav>

但是會推薦你這種方式，它使用媒體查詢來正確說明到達斷點時的導航欄，這里字體大小保持 1em 並且媒體斷點添加為 400 px 用於移動屏幕

 body { margin: 0; padding: 0; min-height: 100vh; } #navbar { display: flex; flex-wrap: wrap; width: 100vw; } #navbar > ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; flex: 1 1; padding: 0 0.5rem; } a { color: black; padding: 0.5rem; } #navbar > ul > li:hover > a{ background: black; color: white; } @media only screen and (max-width: 400px) { #navbar { align-items: center; }.logo { text-align: center; } #navbar, #navbar > ul { flex-direction: column; min-height: 200px; justify-content: space-around; } }

 <nav> <div style="width: 1100px; margin: 0 auto;"> <div id="navbar"> <div class="logo"> <a href="#"> <img src="/logo.jpg" id="logo" width="70" height="70"> </a> </div> <ul> <li><a href="#">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">Store</a></li> <li><a href="faq.html">FAQ</a></li> </ul> </div> </div> </nav>