给nav加了右浮动为什么元素会被挤出contiain？还有logo区的图片文字如何垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link rel="stylesheet" href="h5.css"> </head> <body> <!-- 在此完成网页的HTML代码--> <header> <div class="contain"> <div class="logo"> <a href="#"> <img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png" alt=""> </a> <a href="#"><span>MTMOOC</span></a> </div> <nav> <a href="#" class="active">123456</a> <a href="#">123456</a> <a href="#">123456</a> <a href="#">123456</a> <a href="#">123456</a> </nav> </div> </header> </body> </html>
*{
margin: 0;
padding:0;
}
header{
height: 100px;
background-color: black;
}
.contain{
}
.logo{
height: 100px;
width: 300px;
vertical-align: middle;
}
nav{
float:right;
height: 100px;
width: 300px;
line-height: 100px;
text-align: center;
}
header nav a{
text-decoration: none;
display: block;
height:90px;
float: left;
}
header nav a:nth-child(1){
background-color: yellow;
}
header nav a:nth-child(2){
background-color: skyblue;
}
header nav a:nth-child(3){
background-color: orange;
}
header nav a:nth-child(4){
background-color: blue;
}
header nav a:nth-child(5){
background-color: red;
}
header .active,header a:hover{
padding-bottom: 10px;
}0
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星