gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 03:40:20 25 4
gpt4 key购买 nike

我有什么:

我有一个标题部分和一个正文部分(分别是 class="header"class="body"),在标题部分内部我有一个 Logo 部分和一个菜单部分。我试图将 Logo 和菜单放在同一行。

我尝试过的:

一左一右浮动。导致标题部分的背景消失。将 Logo 的宽度更改为 20%,将菜单的宽度更改为 80%,并将它们左右浮动。与上述相同的结果。尝试显示:内联结果是一团糟。

是否可以将两个部分并排放置而不弄乱其他部分?

也有人可以解释哪里出了问题以及为什么会这样吗?

JSfiddle:http://jsfiddle.net/eZaWK/1/

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

}

谢谢!

最佳答案

添加以下规则:

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

http://jsfiddle.net/4v2nZ/

关于html - 如果不搞砸其他事情,就不能让两个部分彼此相邻,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24982412/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com