对齐社交媒体按钮答案

【问题标题】：Aligning Social Media Buttons对齐社交媒体按钮
【发布时间】：2012-09-07 21:14:49
【问题描述】：

我正在尝试对齐我们的 3 个社交媒体按钮：Facebook/Twitter/Google+，在 393 像素宽度的间隙中均匀排列。它们水平对齐（facebook 似乎在 twitter/google+ 上垂直向下约 2 px），但是我有点挣扎，希望有人能提供帮助。

以下是 CSS/HTML 按钮的代码：

HTML

 <div class="nav-container2">
    <div id="nav3"><div class="fb-like" data-href="http://www.facebook.com/pages/Foscam-UK/222224154548563" data-send="false" data-layout="button_count" data-width="20" data-show-faces="false"></div>
    <a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a>  
    <div class="g-plusone" data-size="medium"></div>

CSS

.nav-container2 { width:940px; margin:auto; height:30px;}
#nav2 { width:547px; height:40px; float:right; margin:1px 0 0 0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }
#nav3 { width:393px; float:left; height:0px; margin-top:10px;}

非常感谢

【问题讨论】：

标签： html css social-networking facebook-social-plugins

【解决方案1】：

试试这个：

<div class="nav-container2">
    <ul class="social-media-list">
        <li>
            <div class="fb-like" data-href="http://www.facebook.com/pages/Foscam-UK/222224154548563" data-send="false" data-layout="button_count" data-width="20" data-show-faces="false"></div>
        </li>
        <li>
            <a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a> 
        </li>
        <li> 
            <div class="g-plusone" data-size="medium"></div>
        </li>
    </ul>
</div>

CSS：

.nav-container2 { width:940px; margin:auto; height:30px;}
.social-media-list { width: 393px; }
.social-media-list li { display:block; float: left; width:33.3%; text-align:center; margin: 0 auto;}

这只是一个猜测，因为我不确定这将如何适合您的页面，但它会为您提供一个 393 像素宽的块元素，其中包含 3 个均匀间隔的列表项。

【讨论】：

非常感谢！完美运行！

【解决方案2】：

html

<div class="nav-container2">
  <ul>
    <li>
        <div class="fb-like" data-href="http://www.facebook.com/pages/Foscam-UK/222224154548563" data-send="false" data-layout="button_count" data-width="20" data-show-faces="false">x</div>
    </li>
    <li>
        <a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a> 
    </li>
    <li> 
        <div class="g-plusone" data-size="medium">y</div>
    </li>
  </ul>
</div>

CSS

.nav-container2 { width:940px; margin:auto; height:30px; background-color: #ace}
.nav-container2 ul div {display: inline;}
.nav-container2 li {display: inline; border: 1px solid #000; width: 33%; float: left;}

基于之前的答案。添加了borders 和background-color 以显示正在发生的事情。

【讨论】：