html - 为什么 css 代码在 float 中不起作用？

我已经用 CSS 和 HTML 编写了一些代码，但 float 不起作用。我想要左侧的站点名称和 Logo ，以及导航栏右侧的菜单或导航。

https://codepen.io/asfafasa/pen/NWWWzgd HTML:

<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;
}

菜单项应位于栏的右侧，而 Logo 和站点名称应位于左侧。

最佳答案

两件事:

.banner-home 应该有 float:left 属性
.banner-home div 没有正确关闭

更新笔: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>

关于html - 为什么 css 代码在 float 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58257433/

html - 为什么 css 代码在 float 中不起作用？

上一篇：html - 在下拉菜单选项中添加 CSS 矩形

下一篇：html - 如何使表格中一行的最后一个单元格占据所有剩余宽度