html - 鼠标悬停按钮/图像未与链接对齐

Question

当我在我的网站上工作时，我有一个临时即将到来的页面，我在页面上添加了另一个社交媒体按钮(电子邮件按钮)，现在链接没有对齐并且彼此重叠。我试图弄清楚如何修复它，但似乎无法弄清楚它缺少什么。任何帮助将不胜感激

下面是 CSS 和 HTML:

ul.social
{
width: 350px;
margin: 80px auto 0;
height: 62px;
}

ul.social li{
float: left;
background: url(../images/social.png) left top no-repeat;
position: relative;
height: 62px;
margin-right: 28px;
}

ul.social li a{
display: block;
width: 62px;
height: 62px;
}


ul.social li.facebook{
height: 62px;
background-position: 0 0;
width: 62px;
}

ul.social li.facebook:hover{
background-position: 0 -62px;
}



ul.social li.pinterest{
height: 62px;
background-position: -90px 0;
width: 62px;
}

ul.social li.pinterest:hover{
background-position: -90px -62px;
}



ul.social li.linkedin{
height: 62px;
background-position: -180px 0;
width: 62px;
}

ul.social li.linkedin:hover{
background-position: -180px -62px;
}

ul.social li.email{
margin-right: 0;
height: 62px;
background-position: -270px 0;
width: 62px;
}

ul.social li.email:hover{
background-position: -270px -62px;
}

<div id="footer">
		<div>
		<ul class="social">
			<li class="facebook"><a href="https://www.facebook.com/heatherhannaydesigns"></li>
			<li class="pinterest"><a href="https://www.pinterest.com/heatherlindsey6/"></li>
			<li class="linkedin"><a href="www.linkedin.com/pub/heather-hannay/7b/33b/56b/en"></li>
			<li class="email"><a href="mailto:info@heatherhannay.com"></li>
		</ul>
		</div>
	</div>

Answer 1

尝试关闭你的 anchor 标签

并添加 list-style: none;填充:0；首先对 ul.social 进行分类并重新检查。