为什么 CSS 代码在浮点数中不起作用的问题?

我已经用CSS和HTML编写了一些代码，但float不起作用。我希望网站名称和徽标位于导航栏的左侧，菜单或导航位于导航栏的右侧。

https://codepen.io/asfafasa/pen/NWWWzgd 目录：

<body>
<div class="page-wrapper">
<header>    
<div class="banner-home">
<h1>
<div class="homepage"> <a href="index.html" title="CrazyPirates" target="new">
<span class="crazy"><img src="images/Logomakr_5MZbkZ.png" alt="" width="30px" class="logo">Sitename & logo </span>
</a>
</div>
</h1>
<div id="open">
<a href="#" onClick="openMenu()">
<i class="fas fa-ice-cream"></i>
</a>
</div>
<nav>
<div class="menu">
<div class="button">
<ul>
<!--<a href="#" onClick="closeMenu()">
<i class="fas fa-times">
</i>
</a>-->
<li>
<div class="homePage_re rd_button">
<a href="index.html" class="navigation_home">
Home
</a></div>
</li>
<li>
<div class="crazyGallary rd_button">
<a href="gallary.html">
Gallay
</a></div>
</li>
<li>
<div class="aboutUs rd_button">
<a href="aboutUs.html">
About Us
</a></div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="space"></div>

.CSS：

*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
div{
display: block;
}

body{
margin: 0;
font-size: 14px;
}
.space{
height: 50px;
}
.page-wrapper{
padding: 0 50px;
}
header{
background: darkgrey;
height: 120px;
color: azure;
z-index: 1;
margin: 0 auto;
padding: 5px 0;
text-align: center;
display: block;
}
header *{
display: inline-block;
}
.banner-home{
align-items: center;
overflow: auto;
}
.homepage{
padding-left: 20px;
float: left;
}
.menu{
display: inline-block;
float: right;
}

.rd_button a{
text-decoration: none;
display: block;
}
.rd_button{
list-style-type: none;
display: block;
}
.button a{
color: #fff;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0 0 0 50px;
font-size: 14px;
z-index: 1;
}
.button{
float: right;
}
.button a:hover{
background-color: tomato;
color: #fff;
}
.button a:hover:after{
transform: translateY(-50%) rotate(-35deg);
}

nav{
margin: 0 auto;
text-align: right;
float: right;
}
.logo{
display: inline;
height: 100%;
}
.banner-home h1 a{
text-decoration: none;
}
nav ul{
list-style: none;
padding: 0;
margin: 0;
}
main{
text-align: center;
}

菜单项应位于栏的右侧，而徽标和网站名称应位于左侧。

2件事：

.banner-home 应该有 float：left 属性
.banner-homediv 未正确关闭

更新的笔：https://codepen.io/david-somekh/pen/yLLLEEK

<body>
<style>
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
div{
display: block;
}

body{
margin: 0;
font-size: 14px;
}
.space{
height: 50px;
}
.page-wrapper{
padding: 0 50px;
}
header{
background: darkgrey;
height: 120px;
color: azure;
z-index: 1;
margin: 0 auto;
padding: 5px 0;
text-align: center;
display: block;
}
header *{
display: inline-block;
}
.banner-home{
float:left;
align-items: center;
overflow: auto;
}
.homepage{
padding-left: 20px;
float: left;
}
.menu{
display: inline-block;
float: right;
}

.rd_button a{
text-decoration: none;
display: block;
}
.rd_button{
list-style-type: none;
display: block;
}
.button a{
color: #fff;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0 0 0 50px;
font-size: 14px;
z-index: 1;
}
.button{
float: right;
}
.button a:hover{
background-color: tomato;
color: #fff;
}
.button a:hover:after{
transform: translateY(-50%) rotate(-35deg);
}

nav{
margin: 0 auto;
text-align: right;
float: right;
}
.logo{
display: inline;
height: 100%;
}
.banner-home h1 a{
text-decoration: none;
}
nav ul{
list-style: none;
padding: 0;
margin: 0;
}
main{
text-align: center;
}
</style>
<div class="page-wrapper">
<header>    
<div class="banner-home">
<h1>
<div class="homepage"> <a href="index.html" title="CrazyPirates" target="new">
<span class="crazy"><img src="images/Logomakr_5MZbkZ.png" alt="" width="30px" class="logo">Sitename & logo </span>
</a>
</div></div>
</h1>
<div id="open">
<a href="#" onClick="openMenu()">
<i class="fas fa-ice-cream"></i>
</a>
</div>
<nav>
<div class="menu">
<div class="button">
<ul>
<!--<a href="#" onClick="closeMenu()">
<i class="fas fa-times">
</i>
</a>-->
<li>
<div class="homePage_re rd_button">
<a href="index.html" class="navigation_home">
Home
</a></div>
</li>
<li>
<div class="crazyGallary rd_button">
<a href="gallary.html">
Gallay
</a></div>
</li>
<li>
<div class="aboutUs rd_button">
<a href="aboutUs.html">
About Us
</a></div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="space"></div>

相关内容

最新更新

热门标签：