Flexbox的HTML / CSS導航欄間距問題
[英]HTML/CSS nav bar spacing issues with flexbox
問題描述
尚未找到我要解決的確切問題，因此在這里進行了說明：
我正在嘗試創建一個導航欄，其標題在左側，而一些導航項在右側。 我還希望導航位於頁面中心，寬度為960px。 我正在嘗試完成2件事：
1.）導航欄應固定在頂部，以便滾動時不會消失。
2）當您最小化屏幕時，標題和導航項之間的間距應首先消失。 當前，這些項目根本不彎曲。
我能夠一次完成這兩項工作之一，但不能同時完成。 任何幫助都是最歡迎的，謝謝。
html { font-family: helvetica; font-size: 18px; } .container { max-width: 960px; margin: 0 auto; } .banner { background-color: aqua; opacity: .5; border-radius: 10px; position: fixed; } .header { display: flex; justify-content: space-between; height: 4rem; align-items: center; width: 960px; } .container .banner .header h1 { margin-left: 2.5rem; } .container .banner .header .nav ul { display: flex; width: 200px; justify-content: space-between; text-decoration: none; margin-right: 2.5rem; } .container .banner .header .nav ul a { color: black; list-style-type: none; text-decoration: none; }
<div class="container"> <div class="banner"> <div class="header"> <h1>My Sweet Sweet Georgia</h1> <div class="nav"> <ul> <li><a href="#">doggy</a></li> <li><a href="#">puppy</a></li> <li><a href="#">toys</a></li> </ul> </div> </div> </div> </div>
2 個解決方案
解決方案1
0 2017-11-17 05:41:56
您可以使用align-items: left作為標題，使用align-items: right代替使用margin
* { padding: 0; margin: 0; } html { font-family: helvetica; font-size: 18px; } .container .header { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; height: 4rem; align-items: center; width: 100%; position: fixed; background: aqua; opacity: .7; border-radius: 10px; } .container .header .nav ul li { display: inline-flex; }
<!DOCTYPE html> <html> <head> <title>My Puppy</title> <link href="./resources/reset.css" type="text/css" rel="stylesheet"> <link href="./resources/style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"> <h1>My Sweet Sweet Georgia</h1> <div class="nav"> <ul> <li><a href="#">doggy</a></li> <li><a href="#">puppy</a></li> <li><a href="#">toys</a></li> </ul> </div> </div> </div> </body>
解決方案2
0 2017-12-01 15:40:04
在您的css文件中：
在.header中刪除
.header {
width: 960px;
}
添加.banner
.banner {
max-width: 960px;
width: 100%;
}
導航欄問題與jquery，css，html5
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.