html - html 不是完全流动的

Question

您好，我是 html 和 css 的新手，我有一个问题。我试图让我的页面尽可能流畅，但由于某种原因，我的按钮和 h3 不断与导航栏发生冲突。有人可以帮帮我吗 ？

这是我的html代码：

<div id="content">
   <h2>Kleding</h2>
    <div id="navbanner">
    <div id="nav2">
        <ul>
            <li><a href="#Pasgeborenen">Pasgeborenen</a></li>
            <li><a href="#Baby">Baby</a></li>
            <li><a href="#Peuter">Peuter</a></li>
            <li><a href="#Kleuter">Kleuter</a></li>
        </ul>
    </div>
    </div>
    <div id="img">
     <button onclick="ShowCheckBoxes()"><img src="../images/winkelwagen.jpg"></button>
    </div>
    <a name="Pasgeborenen"><h3>Pasgeborenen</h3></a>
</div>

这是使用的css：

#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
}

#navbanner{
width: 100%;
height: 5.5em;
background: orange;
}
#nav2{
 text-align: center;

}
/* unorded list */
#nav2 ul{
 display: inline-block;
 list-style-type:none;
 margin-left: auto;
 margin-right: auto;
}

#nav2 ul li{
 float:left;

}
 #nav2 ul li a:hover{
  background-color: #ffbc00;
  text-decoration: underline;
 }
/* text in blokken */
#nav2 ul li a{
 display: inline-block;
 padding: 1em;
 background: orange;
 font-family: Arial, sans-serif;
 font-size: large;
 color: white;
}
button{
 float: right;
}

提前致谢！

Answer 1

只需删除高度：5.5em；来自#navbanner。其余代码可能保持原样。

#navbanner{
width: 100%;
height: 5.5em; <- this has to go 
background: orange;
}