为什么子div不飘向右侧？[副本]

Question

下面是我的代码：

null

.header{
    display: flex;
    justify-content: center;
    height: 60px;
}

.header .header-content{
    display: flex;
    align-items: center;
    height: 100%;
    width: 70%;
}

.menu{
    float: right;
}

ul{
    list-style: none;
}

li{
    display: inline;
    margin-left: 40px;
}

html prettyprint-override"><div class="header">
    <div class="header-content">
        <div class="logo">
            <img src="logo.png" alt="" srcset="">
        </div>
        <div class="menu">
            <ul>
                <li>All Courses</li>
                <li>Interactive Courses</li>
                <li>Sign Up Free</li>
            </ul>
        </div>
    </div>
</div>

null

为什么类名为“menu”的div没有浮动到右侧？

我希望div浮动到其父项右侧。

谢谢.

Answer 1

如果.header-content中只有两个元素，则可以使用flexbox在它们之间放置空格：

https://developer.mozilla.org/en-us/docs/web/css/justify-content

.header .header-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 70%;
}