Question

您好我是html＆amp;的新手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;
}

HTML不是完全流动的

1 个答案: