3
J'ai créé cette barre de navigation à l'aide de flexbox, mais je veux que les boutons de droite soient à l'extrême droite. Voici mon code: https://codepen.io/mayankkamboj/pen/XKbdOYEspace mystérieux après la navigation
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;
}
}
Il semble bien sur les écrans mobiles, mais pose un problème sur des résolutions plus élevées. Je veux que les boutons soient sur les côtés extrêmes avec de l'espace entre eux. Comment fait-on ça?