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.