[英]Mysterious space after navigation
我使用flexbox制作了這個導航欄,但我希望右側按鈕位於最右側。 這是我的代碼: https : //codepen.io/mayankkamboj/pen/XKbdOY
HTML:
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
<nav>
<div class='container'>
<div class='nav-btn hoverback'>
<img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
</div>
<div class='nav-btn no-border'>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
<input type='text' placeholder='Where to ?' class='search'/>
</div>
</div>
<div class='container'>
<div class='nav-btn hoverback'>
<div class='btn b-a-host'>Become a Host</div>
</div>
<div class='nav-btn hoverback'>
Help
</div>
<div class='nav-btn hoverback'>
Sign Up
</div>
<div class='nav-btn hoverback'>
Log In
</div>
</div>
</nav>
CSS:
*{
box-sizing:border-box;
}
body{
padding:0;
margin:0;
}
nav{
border-bottom:1px solid #ddd;
font-family:'Roboto';
display:flex;
justify-content:space-between;
font-weight:300;
}
nav:after{
content:" ";
display:block;
clear:both;
height:0.01px;
}
.container{
display:flex;
}
.nav-btn{
height:4em;
padding:0em 1em;
border-right:1px solid grey;
display:flex;
min-width:100px;
justify-content:center;
align-items:center;
}
.no-border{
border-right:0px solid white;
}
img{
height:60%;
}
.fa{
color:#ccc;
}
nav .search{
height:4.5em;
width:20em;
font-family:'Roboto';
font-weight:400;
border-style:none;
text-indent:1em;
}
nav .search:focus{
outline-style:none;
}
nav .btn{
font-weight:400;
color:grey;
border:2px solid #aaa;
padding:0.5em 0.7em;
letter-spacing:0.01em;
}
.b-a-host{white-space:nowrap;}
.nav-btn.hoverback:hover{
cursor:pointer;
background-color:#f8f8f8;
}
@media (max-width:500px){
nav{
flex-direction:column;
}
}
它在移動屏幕上看起來很好,但在更高分辨率時會出現問題。 我希望按鈕位於極端,兩者之間有空間。 我該怎么做?
你不需要一個clearfix ,因為你正在處理flexboxes而不是浮動容器 - 所以你可以刪除nav:after
。
問題是nav:after
是一個彈性項目和justify-content: space-around
也會考慮這個 - 在刪除nav:after
看下面的演示nav:after
:
* { box-sizing: border-box; } body { padding: 0; margin: 0; } nav { border-bottom: 1px solid #ddd; font-family: 'Roboto'; display: flex; justify-content: space-between; font-weight: 300; } /* nav:after { content: " "; display: block; clear: both; height: 0.01px; } */ .container { display: flex; } .nav-btn { height: 4em; padding: 0em 1em; border-right: 1px solid grey; display: flex; min-width: 100px; justify-content: center; align-items: center; } .no-border { border-right: 0px solid white; } img { height: 60%; } .fa { color: #ccc; } nav .search { height: 4.5em; width: 20em; font-family: 'Roboto'; font-weight: 400; border-style: none; text-indent: 1em; } nav .search:focus { outline-style: none; } nav .btn { font-weight: 400; color: grey; border: 2px solid #aaa; padding: 0.5em 0.7em; letter-spacing: 0.01em; } .ba-host { white-space: nowrap; } .nav-btn.hoverback:hover { cursor: pointer; background-color: #f8f8f8; } @media (max-width:500px) { nav { flex-direction: column; } }
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'> <nav> <div class='container'> <div class='nav-btn hoverback'> <img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' /> </div> <div class='nav-btn no-border'> <i class="fa fa-search fa-2x" aria-hidden="true"></i> <input type='text' placeholder='Where to ?' class='search' /> </div> </div> <div class='container'> <div class='nav-btn hoverback'> <div class='btn ba-host'>Become a Host</div> </div> <div class='nav-btn hoverback'> Help </div> <div class='nav-btn hoverback'> Sign Up </div> <div class='nav-btn hoverback'> Log In </div> </div> </nav>
您可以將一個類添加到另一個容器並使其為justify-content: flex-end
以及更多請將flex:1
添加到容器中,以便兩個容器可以具有相同的寬度並刪除clearfix。 我希望它對你有所幫助
*{ box-sizing:border-box; } body{ padding:0; margin:0; } nav{ border-bottom:1px solid #ddd; font-family:'Roboto'; display:flex; justify-content:space-between; font-weight:300; } .container{ display:flex; flex: 1; } .container.right { justify-content: flex-end; } .nav-btn{ height:4em; padding:0em 1em; border-right:1px solid grey; display:flex; min-width:100px; justify-content:center; align-items:center; } .no-border{ border-right:0px solid white; } img{ height:60%; } .fa{ color:#ccc; } nav .search{ height:4.5em; width:20em; font-family:'Roboto'; font-weight:400; border-style:none; text-indent:1em; } nav .search:focus{ outline-style:none; } nav .btn{ font-weight:400; color:grey; border:2px solid #aaa; padding:0.5em 0.7em; letter-spacing:0.01em; } .ba-host{white-space:nowrap;} .nav-btn.hoverback:hover{ cursor:pointer; background-color:#f8f8f8; } @media (max-width:500px){ nav{ flex-direction:column; } }
<nav> <div class='container'> <div class='nav-btn hoverback'> <img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' /> </div> <div class='nav-btn no-border'> <i class="fa fa-search fa-2x" aria-hidden="true"></i> <input type='text' placeholder='Where to ?' class='search'/> </div> </div> <div class='container right'> <div class='nav-btn hoverback'> <div class='btn ba-host'>Become a Host</div> </div> <div class='nav-btn hoverback'> Help </div> <div class='nav-btn hoverback'> Sign Up </div> <div class='nav-btn hoverback'> Log In </div> </div> </nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.