我一直有麻烦应用clearfix到一些div,我已经遵循了几个教程,发现这里和这里,但仍然我的div命名栏将不会扩展到容纳徽标和导航div。
这是我的价目表,如有任何建议,我将不胜感激。我给div设置了一些奇怪的颜色,以帮助看到它们在哪里结束,并帮助尝试看到到底发生了什么。<div id="bar" class="group">
<div id="nav">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>What We Do</li></a>
<a href="#"><li>Our Work</li></a>
<a href="#"><li>Our People</li></a>
<a href="#"><li>Contact Us</li></a>
</ul>
</div>
<div id="logo">
<img src="images/logo.png" title="" alt="" />
</div><!--Close Logo-->
CSS: body{
margin:0;
}
.group:after {
content: "";
display: table;
clear: both;
}
#bar{
background-color: #e2871a;
width:100%;
}
/*NAVIGATION */
#nav{
color:#fff;
float:right;
margin-right:50px;
background-color:chartreuse;
}
#nav>ul{
list-style:none;
padding:0;
margin:0;
}
#nav>ul li{
display:inline;
}
#nav>ul a>li {
color:#fff;
padding-bottom:100px;
background-color:blue;
margin-right:15px;
}
#nav>ul a>li:hover{
border-bottom:3px solid white;
}
#logo{
float:left;
width:15%;
margin-left:5%;
background-color:red;
}
问题是:
#nav>ul li{
display: inline;
}
上/下填充或边距不会影响行内元素相对于父元素的高度。改成block
或者inline-block