使用flexbox定位水平菜单

我正在尝试使用flexbox进行固定菜单。在我的导航栏中，我创建了2个div。首先应该包含徽标和第二个菜单（使用display:flex属性）。当我想要放置菜单的li元素时，我遇到了问题。我想要水平菜单，但是当我添加justify-content:space-between时，我的第一个元素应该位于菜单div的左边缘，但它有一个小的边距，我不知道为什么。使用flexbox定位水平菜单

https://jsfiddle.net/4Lmu08yc/

header { 
 
    height:100vh; 
 
    background-color:yellow; 
 
    width:100vw; 
 
    max-width:100%; 
 

 
} 
 

 
.navbar { 
 
    width:100vw; 
 
    background-color:grey; 
 
    height:7vh; 
 
    max-width:100%; 
 
    position:fixed; 
 
    border-bottom:5px solid white; 
 
    z-index:2; 
 

 
} 
 

 
.flex_row { 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 

 
.container{ 
 
    height:100%; 
 
    width:100vw; 
 
    max-width:100%; 
 
    background-color:green; 
 
    display:flex; 
 
} 
 

 

 
#logo { 
 
    height:100%; 
 
    background-color:white; 
 
    flex-grow:1; 
 
} 
 

 
#menu { 
 
    height:100%; 
 
    background-color:yellow; 
 
    flex-grow:1; 
 
} 
 

 
#menu ul { 
 
    list-style-type:none; 
 
    justify-content:flex-start; 
 
    align-content:flex-end; 
 

 
} 
 

 
#menu ul li { 
 

 
    border:1px solid black; 
 
    line-height:40px; 
 
}

<header> 
 
<div class="container"> 
 
<div class="navbar flex_row"> 
 
    <div id ="logo"></div> 
 
    <div id ="menu"> 
 
     <ul class="flex_row"> 
 
      <li><a href="#">text1</a></li> 
 
      <li><a href="#">text2</a></li> 
 
      <li><a href="#">text3</a></li> 
 
      <li><a href="#">text4</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
</div> 
 
</header>

来源

2016-09-07 mati

分享你的完整代码，并提及你正在得到什么错误。 – JeetDaloneboy

看起来像你只是forg0t零边缘和填充 - https://jsfiddle.net/bwpg01b0/1/ –

你必须增加保证金：0;到'#menu ul'。

HTML会自动为无序列表添加一个页边空白。

#menu ul { 
     margin:0; 
}

来源

2016-10-26 15:12:56

使用flexbox定位水平菜单

回答

相关问题