css - Why menu items are not at the right of the div? -
i want have menu has logo @ left , menu items @ right, im using flexbox not working. menu items stick logo. know issue?
this html:
<div class="container"> <header class="header content"> <h1 class="title"><a href="">logo</a></h1> <ul class="main_nav"> <li><a href="">item 1</a></li> <li><a href="">item 2</a></li> </ul> <div class="clear"></div> </header> </div>
example: https://jsfiddle.net/adwkkvt6/
css
* { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; margin:0; padding: 0; } .container { float: left; width: 100%; } .content { width: 94%; margin: 0 auto; } .header, .main_nav{ display: flex; } .title a{ color:green; font-size: 0.85em; } .main_nav li{ padding: 0 15px; } .main_nav{ background-color: red; justify-content: space-between; align-items: center; } .main_nav a{ font-weight: 700; font-size: 0.85em; color:gray; }
add this
.title{ flex:1 0 0; }
title child have give space how mach occupy parent div use flex:1 0 0
space logo.
flex:1 0 0
-
flex-grow:1; flex-shrink:0; flex-basis:0;
more info flex visit.
* { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; margin: 0; padding: 0; } .container { float: left; width: 100%; } .content { width: 94%; margin: 0 auto; } .header, .main_nav { display: flex; } .title { flex: 1 0 0; } .title { color: green; font-size: 0.85em; } .main_nav li { padding: 0 15px; } .main_nav { background-color: red; justify-content: space-between; align-items: center; } .main_nav { font-weight: 700; font-size: 0.85em; color: gray; }
<div class="container"> <header class="header content"> <h1 class="title"><a href="">logo</a></h1> <ul class="main_nav"> <li><a href="">item 1</a></li> <li><a href="">item 2</a></li> </ul> <div class="clear"></div> </header> </div>
Comments
Post a Comment