Html 如果不把其他事情搞砸，就不能让两个部分挨在一起_Html_Css

Html 如果不把其他事情搞砸，就不能让两个部分挨在一起

html css

Html 如果不把其他事情搞砸，就不能让两个部分挨在一起,html,css,Html,Css,我所拥有的：我有一个标题部分和一个正文部分（分别是class=“header”class=“body”），在标题部分内我有一个徽标部分和一个菜单部分。我试图把标志和菜单放在同一行我尝试的是：一左一右浮动。导致标题部分的背景消失。将徽标宽度更改为20%，将菜单宽度更改为80%，并将其左右浮动。与上述结果相同。尝试显示：内联，结果非常混乱有没有可能让这两个部分挨在一起而不弄乱其他东西还有人能解释什么是错的，为什么是错的 JSfiddle：相关html <body> &

我所拥有的：

我有一个标题部分和一个正文部分（分别是class=“header”class=“body”），在标题部分内我有一个徽标部分和一个菜单部分。我试图把标志和菜单放在同一行

我尝试的是：

一左一右浮动。导致标题部分的背景消失。将徽标宽度更改为20%，将菜单宽度更改为80%，并将其左右浮动。与上述结果相同。尝试显示：内联，结果非常混乱

有没有可能让这两个部分挨在一起而不弄乱其他东西

还有人能解释什么是错的，为什么是错的

JSfiddle：

相关html

<body>
    <section class="header">
            <section class="logo">
                <a href="#"><img src="logo.png" height="50px"/></a>
            </section>
            <section class="menu">
                <ul id="menu">
                    <li><a href="#">Home</a></li>
                    <li>
                        <a href="#">About ￬</a>
                        <ul class="hidden">
                            <li><a href="#">Who We Are</a></li>
                            <li><a href="#">What We Do</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
    </section>

    <hr>

    <section class="body">
        <h1>Hello World</h1>
        <p>Hello world</p>
    </section>
</body>

谢谢大家!

添加以下规则：

.header, .logo, .menu{
    float: left;
}

页眉部分的背景消失，正如您在JSFIDLE中看到的那样，linkedit消失，因为背景颜色css应用于“.logo”，而不是“.header”。提琴：啊，我明白了。顺便问一下，是否可以将菜单向右浮动，但将徽标保持在左侧？我尝试更改徽标部分的宽度，它模拟向右浮动。谢谢你的回答！是，从“ul”样式中删除

位置：绝对

并放置

.menu{float:right；}

。同时添加

.hidden{position:absolute；}

，这样您的菜单就不会在悬停时中断任何内容。我已经更新了小提琴：

.header, .logo, .menu{
    float: left;
}