img和其他标簽中間有一條背景線

解決方案有4種，是一位全棧大哥告訴的！

下面是HTML檔案

<header>
		<img src="photo.jpg"/>
		<nav>
			<ul>
				<li><a href="index.html" target="_blank" rel="external nofollow" >home</a></li>
				<li><a href="About.html" target="_blank" rel="external nofollow" >About</a></li>
				<li><a href="Photos.html" target="_blank" rel="external nofollow" >Photos</a></li>
				<li><a href="Live.html" target="_blank" rel="external nofollow" >Live</a></li>
				<li><a href="Contact.html" target="_blank" rel="external nofollow" >Contact</a></li>
			</ul>
		</nav>
	
	</header>
           

下面是css檔案

*{
	margin:0;
	padding:0;
}
body{
	background:#555;
}
header{
	width:900px;
	height:700px;
	margin:20px auto;

}
li{
	float:left;
	display:inline;
	width:180px;
	height:30px;
	text-align:center;
	background:#777;
	line-height:30px;
}
a{
	color:#fff;
	text-decoration:none;
	display:block;
}
a:hover{
	background:#555;
}
.wenzi{
	color: #eee;
}
           

第一種方法沒有實驗；

第二種方法解決，但文字消失要從新設定文字大小；

第三種解決方案完美解決；       垂直對齊：頂部；

第四種解決方案也完美解決；