Question

我有什么：

我有一个标题部分和一个正文部分（class =＆＃34;标题＆＃34; class =＆＃34; body＆＃34;）在标题部分我有一个徽标部分和一个菜单部分。我想把徽标和菜单放在同一条线上。

我尝试了什么：

左边一个，另一个右边漂浮。标题部分的背景结果消失。将徽标的宽度更改为20％，将菜单更改为80％，并将它们左右浮动。与上述结果相同。试过显示：内联哪个结果很乱。

是否可以让两个部分彼此相邻而不会弄乱别的东西？

也有人可以解释什么是错的，为什么呢？

相关的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>

相关CSS

body{
    margin: auto;
    background-color: #46a7bb;
}

.header{
    width:100%;

}

hr{
    border-color:black;
    border-bottom-width:5px;
    margin:0 0 0 0;
}

h1{
    margin: 0 0 0 0;
}

.body{
    width:75%;
    margin:auto;
    background:white;
    text-align: center;
}

.logo{
    margin:0;
    background: #313145;

}

谢谢！

Answer 1

添加以下规则：

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

http://jsfiddle.net/4v2nZ/

如果不搞砸其他事情，就不能让彼此相邻的两个部分

1 个答案: