Question

这是我的HTML：

<div class="footer-social">
    <span>Connect with us:</span>
    <li><a href="http://www.facebook.com">
        <img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/social/facebook.png' />
    </a></li>
<li><a href="http://www.twitter.com">
    <img src='http://grfx.cstv.com/schools/wis/graphics/icon_twitter24.jpg' />
</a></li>
<li><a href="http://www.youtube.com">
    <img src='http://mylzh.net/wiki/worldofwarcraft/images/5/5d/Icon-youtube-22x22.png' />
</a></li>

这是我的css：

.footer-social { float: right; margin-top:5px;}
.footer-social li { display: inline;}
.footer-social span { margin-top: -20px;}

jsfiddle：http://jsfiddle.net/qNTL2/

我希望“与我们联系：”以图像为中心，但似乎无论我怎么努力，它都没有成功。有人知道为什么或可能解决我的问题吗？

任何帮助将不胜感激！谢谢！

Answer 1

首先，您需要在使用<ul>时添加</ul>和<li>然后我不知道您希望它如何居中，所以我为您制作了2个演示版。

你的意思是这样居中？

.footer-social { float: right; margin-top:5px; height:30px; }
.footer-social ul {float:left; padding:0; margin:0;}
.footer-social li {float:left; list-style:none; margin-left:5px;}
.footer-social span { float:left; }

<强> DEMO

还是更喜欢这个？

.footer-social { float: right; margin-top:5px; }
.footer-social ul { padding:0; margin:0 0 0 10px;}
.footer-social li {float:left; list-style:none; margin-left:5px;}

<强> DEMO 2

Answer 2

编辑自己的CSS

.footer-social { float: right; margin-top:5px;}
.footer-social li { display: inline;float:right;}
.footer-social span { margin-top: -20px;}

编辑本部分

 .footer-social li { display: inline;float:right;}

Fiddle Demo

在页脚中的社会图标

2 个答案: