Question

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

以下是CSS＆amp; 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

尝试关闭锚标记

并添加list-style：none;填充：0;先修改ul.social并重新检查。

翻转按钮/图像未与链接对齐

1 个答案: