調整社交媒體按鈕

我試圖對齊我們的3個社交媒體按鈕：Facebook/Twitter/Google +，均勻分佈在393px寬度的空白處。他們水平對齊（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;}

非常感謝

來源

2012-09-07 user994319

試試這個：

<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;}

這只是一個猜測，因爲我不知道這將如何適應在你的頁面，但會給你3個均勻分佈的列表項393px寬的塊元素。

來源

2012-09-07 21:26:03

非常感謝你！完美工作！ – user994319

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被添加以顯示發生了什麼。

來源

2012-09-07 22:05:31

調整社交媒體按鈕

回答

相關問題