堆叠<li>图片

Question

我为此缺少什么使这些图像链接彼此相邻？只需通过CSS控制翻转的简单图像链接。

我觉得我错过了一个边缘或填充物等......

非常感谢任何帮助。

＆＃13;

＆＃13;

/* Social */

.social-links {
	padding-top: 50px;
	position: relative;
	
	
}

.social-links-list li{
 	margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
	
}


.social-links-list li, .social-links-list a {
    height: 36px;
    display: block;
	float:left;
}

.twitter{
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.twitter a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.facebook {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.facebook a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.youtube {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.youtube a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.linkedin {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.linkedin a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.blogs {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.blogs a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.googleplus {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.googleplus a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

＆＃13;

<div class="social-links">
	<ul class="social-links-list">
		<li class="twitter"><a href="#"></a></li>
		<li class="facebook"><a href="#"></a></li>
		<li class="youtube"><a href="#"></a></li>
		<li class="linkedin"><a href="#"></a></li>
		<li class="blogs"><a href="#"></a></li>
		<li class="googleplus"><a href="#"></a></li>
	</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您使用position

将它们放在彼此的顶部

inline-block

怎么样？

.social-links-list li{
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

http://codepen.io/anon/pen/adzaXa

Answer 2

问题出在li上的position: absolute;。

.social-links-list li{
    margin: 0;
    padding: 0;
    list-style: none;
   /* position: absolute;  REMOVE THIS */
    top: 0;
}
.social-links-list {
    display: flex; /* ADD DISPLAY: FLEX; TO THE UL */
}

您还应该删除应用于锚点的所有float: left;样式。