为啥子div不浮动到右侧？ [复制]

Posted 2023-03-05

【中文标题】为啥子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"  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% 的宽度并在其父级居中，导致您的菜单显示为居中。

【参考方案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%;