3
나는이 탐색 바를 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;
}
}
. 단추가 그들 사이에 공간이있는 극단적 인면에 있기를 원합니다. 어떻게해야합니까? 당신이 flexboxes하지 부동 용기 다루고로