使用flexbox定位水平菜单

Question

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

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>

Answer 1

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

HTML会自动为未排序的列表添加边距。

#menu ul {
      margin:0;
}