为什么子div不浮动到右侧？ [复制]答案

【问题标题】：Why child div not floating to the right side? [duplicate]为什么子div不浮动到右侧？ [复制]
【发布时间】：2020-10-29 13:06:28
【问题描述】：

这是我的代码：

.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;
}

<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>

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

我希望该 div 浮动到其父级的右侧。

谢谢。

【问题讨论】：

您的内容向右浮动，但封闭的 div header-content 只有 70% 的宽度并在其父级居中，导致您的菜单显示为居中。

标签： html css

【解决方案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%;
}

【讨论】：