对齐社交媒体图标的Div,表格样式

时间:2013-02-02 09:30:26

标签: css html icons spacing

我想在我的页脚上添加一些社交媒体图标,两个列中的每一个都有四个图标很好的空间,但我的代码目前只能将所有图标放在另一个上面,这将是什么解决方案?

的CSS:

.container
{
}
.container DIV
{
    width: 15px;
    margin: 1px;
}

HTML:

<div>
<div style="width: 200px;" class="container" display: "inline-block" >
<div style="float: left;"><a title="Facebook" href="http://www.facebook.com/KenyaLuxuryVillas" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/facebook-logo-square.png" /></a></div>
<div style="float: right;"><a title="Stumbleupon" href= "http://www.stumbleupon.com/stumbler/bestbeacheskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/stumbleupon-logo-square.png" /></a></div>
<div style="float: left;"><a title="Linkedin" href= "http://ke.linkedin.com/in/luxuryvillaskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/linkedin-logo-square2.png" /></a></div>
<div style="float: right;"><a title="Twitter" href= "https://twitter.com/villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/twitter-bird2-square.png" /></a></div>
<div style="float: left;"><a title="Google+" href= "https://plus.google.com/u/0/108558298587711226912/" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/google-logo-square.png" /></a></div>
<div style="float: right;"><a title="Vimeo" href= "https://vimeo.com/africashot" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/vimeo-s.png" /></a></div>
<div style="float: left;"><a title="Skype" href= "callto://villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/skype-s.png" /></a></div>
<div style="float: right;"><a title="YouTube" href= "http://www.youtube.com/user/DianiBeachKenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/youtube.png" /></a></div>
</div>

任何帮助将受到高度赞赏!提前谢谢!

2 个答案:

答案 0 :(得分:1)

Div是块元素,因此每个div将跨越整行 要并排div,只需删除它们的块属性。

.container .container DIV { width: 15px; margin: 1px; display:inline-block; }

答案 1 :(得分:0)

尝试类似:

<强> HTML

    <div>

<div style="width: 200px;" class="container" display: "inline-block" >

 <div id="col1" style="float:left">

<div style=""><a title="Facebook" href="http://www.facebook.com/KenyaLuxuryVillas" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/facebook-logo-square.png" /></a></div>

<div style=""><a title="Linkedin" href= "http://ke.linkedin.com/in/luxuryvillaskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/linkedin-logo-square2.png" /></a></div>

<div style=""><a title="Google+" href= "https://plus.google.com/u/0/108558298587711226912/" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/google-logo-square.png" /></a></div>

<div style=""><a title="Skype" href= "callto://villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/skype-s.png" /></a></div>


    </div>


    <div id="col2" style="float:left;"> 
<div style=""><a title="Stumbleupon" href= "http://www.stumbleupon.com/stumbler/bestbeacheskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/stumbleupon-logo-square.png" /></a></div>   
        <div style=""><a title="Twitter" href= "https://twitter.com/villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/twitter-bird2-square.png" /></a></div>

    <div style=""><a title="Vimeo" href= "https://vimeo.com/africashot" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/vimeo-s.png" /></a></div>
    <div style=""><a title="YouTube" href= "http://www.youtube.com/user/DianiBeachKenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/youtube.png" /></a></div>
    </div>
</div>

CSS

.container
{
}
.container div
{
    width: auto;
    margin: 1px;
}
.container img
{
    width:30px;
}

Live jsfiddle:http://jsfiddle.net/6AA2L/3/