我正在尝试水平对齐图像,但它们都彼此重叠。
我对此很陌生,所以很难弄清楚这一点!
任何帮助将不胜感激!
<div class="social">
<ul>
<div class="facebook">
<li><a href="#"></a></li>
</div>
<div class="twitter">
<li><a href="#"></a></li>
</div>
<div class="youtube">
<li><a href="#"></a></li>
</div>
<div class="vimeo">
<li><a href="#"></a></li>
</div>
</ul>
</div>
这是 css
.social {
width: 50%;
margin: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
display: inline-block;
position: relative;
}
.social ul {
list-style: none;
margin: 0;
padding: 0;
}
.social ul li {
margin: 0;
padding: 0;
display: inline;
}
.facebook a:link {
background-image: url(../img/facebook.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
position: absolute;
}
.facebook a:hover {
background-position: bottom;
}
.twitter a:link {
background-image: url(../img/twitter.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
position: absolute;
}
.twitter a:hover {
background-position: bottom;
}
.youtube a:link {
background-image: url(../img/youtube.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
}
.youtube a:hover {
background-position: bottom;
}
.vimeo a:link {
background-image: url(../img/vimeo.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
}
.vimeo a:hover {
background-position: bottom;
}
下面是 JSFiddle 中的代码 http://jsfiddle.net/hdnrwrmj/
我建议删除div
s并将类名添加到li
s中,并删除绝对位置。小提琴
编辑:也使用inline-block
显示li
.HTML
<div class="social">
<ul>
<li class="facebook"><a href="#"></a></li>
<li class="twitter"><a href="#"></a></li>
<li class="youtube"><a href="#"></a></li>
<li class="vimeo"><a href="#"></a></li>
</ul>
</div>
.CSS
.social {
width: 50%;
margin: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
display: inline-block;
position: relative;
}
.social ul {
list-style: none;
margin: 0;
padding: 0;
}
.social ul li {
margin: 0;
padding: 0;
display: inline-block;
}
.facebook a:link {
background-image: url(http://www.cruisedeals.com/images_shared/top-deal-star-35px.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
}
.facebook a:hover {
background-position: bottom;
}
.twitter a:link {
background-image: url(http://upload.wikimedia.org/wikipedia/ca/thumb/a/a0/Logo_upc.png/35px-Logo_upc.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
}
.twitter a:hover {
background-position: bottom;
}
.youtube a:link {
background-image: url(http://data.cyclowiki.org/images/thumb/d/dc/ClericiMariani.png/35px-ClericiMariani.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
}
.youtube a:hover {
background-position: bottom;
}
.vimeo a:link {
background-image: url(http://mkhx.joyme.com/images/mkhx/thumb/8/88/%E5%9C%B0%E7%8B%B1.png/35px-%E5%9C%B0%E7%8B%B1.png);
width: 35px;
height: 35px;
background-position: left;
display: block;
border: none;
outline: none;
}
.vimeo a:hover {
background-position: bottom;
}
这是 JSFIDDLE 的更新HTML & CSS
我已经删除了 ul 中的div。 它实际上不符合标准。
Here is the updated fiddle:-
And put your <div> inside the <li>
http://jsfiddle.net/pnsqcL2t/