老师好,我自己做一个网站,但不知道为什么最后加search图片的时候无法居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航页</title>
<style type="text/css">
/*清除CSS所有预设边距*/
*{margin: 0;
padding:0}
/*清楚list的标识*/
ul{list-style: none;}
/*a标签下划线*/
a{text-decoration:none;}
.container{width: 1200px;
margin: auto;}
.header{width:1200px;
background-color:#EEEEEE;
border-radius:5px;
overflow: hidden;
zoom:1;
}
.header .logo{
height: 80px;
margin-left:50px;
float: left;
}
.header .nav{
margin-right:250px;
float: right;
overflow: hidden;
zoom:1;
}
.search,.publish,.profile{
height: 80px;
float: right;
}
.search span{display: inline-block;
height: 100%;
vertical-align:middle;}
/*float属性是不会继承父元素的*/
.header .nav li{
float: left;
margin-right:15px;
}
.header .nav li a{
padding: 0 20px;
height: 80px;
line-height: 80px;
display: block;
font-family:'微软雅黑';
font-size:18px;
color:black;
}
.header .nav li a:hover{
color:white;
}
</style>
</head>
<body>
<div class="container">
<!--页眉-->
<div class="header">
<div class="logo">
<a href=""><img src="img/logo.png" height="80px" width="200px"></a>
</div>
<div class="publish"><img src=""></div>
<div class="profile"><img src="" ></div>
<div class="search"><span><img src="img/search.png" height="40px" width="190px"></span></div>
<ul class="nav">
<li><a href="#">作品</a></li>
<li><a href="#">综合</a></li>
<li><a href="#">企划</a></li>
<li><a href="#">活动</a></li>
</ul>
</div>
</div>
</body>
</html>
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星