Html 页脚中的社交图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20571849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Social icons in footer
提问by scapegoat17
Here is my html:
这是我的 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>
and here is my css:
这是我的css：
.footer-social { float: right; margin-top:5px;}
.footer-social li { display: inline;}
.footer-social span { margin-top: -20px;}
jsfiddle: http://jsfiddle.net/qNTL2/
jsfiddle：http: //jsfiddle.net/qNTL2/
I want the "Connect with us:" to be centered with the images, but it seems no matter how hard i try, it isn't working out. Anybody know why or possibly have a solution to my issue?
我希望“与我们联系：”以图像为中心，但似乎无论我多么努力，它都行不通。有人知道为什么或可能有解决我的问题的方法吗？
Any help would be much appreciated! Thanks!
任何帮助将非常感激！谢谢！
回答by C Travel
First you need to add <ul>and </ul>when using <li>and then i dont know how you want it centered, so i made 2 demo's for you.
首先你需要添加<ul>和</ul>使用时<li>然后我不知道你想要它如何居中，所以我为你制作了2个演示。
You mean centered like this?
你是说像这样居中？
.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; }
Or more like this?
或者更像这样？
.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;}
回答by Amarnath Balasubramanian
Edited CSS of yours
编辑你的 CSS
.footer-social { float: right; margin-top:5px;}
.footer-social li { display: inline;float:right;}
.footer-social span { margin-top: -20px;}
Edited this part
编辑了这部分
.footer-social li { display: inline;float:right;}
