Addthis共享填充/邊距

我已將addthis共享按鈕添加到頁面here，並且我無法在整個div寬度上獲得相同的邊距/分佈，所以在右側存在一個考慮流體寬度的間隙。Addthis共享填充/邊距

我試過在不同百分比的比例邊距/填充，但似乎無法使其響應。

這裏的CSS，剩下的就是在檢查可見：

.bg.social { 
border: 1px solid #FCFCFD; 
padding: 15px 0; 
background: #E4E4E4; 
text-align: center; 
width: 94%; 
margin: 0 0 2em; 
height: 32px; 
} 

.bg.social a { 
margin: 0 4%; 
padding: 0; 
float: none; 
} 

.addthis_toolbox { 
margin: 0 2%; 
}

更新：得到它與下面的工作，同爲Bartdude的回答是：

.bg.social a { 
padding: 0 3%; 
display: inline-block; 
} 

.bg.social { 
border: 1px solid #FCFCFD; 
padding: 15px 0; 
background: #E4E4E4; 
text-align: center; 
width: 95%; 
margin: 0 0 2em; 
}

來源

2013-11-25 253

請創建的jsfiddle，而不是發佈一個鏈接，這將很快不再顯示您的問題，讓您在未來沒有用任何的問題。一個關於你的問題的建議，也許看看你的鏈接的內聯塊顯示，允許使用它周圍的文本對齊和邊距。 –

好點，將來會做。嘗試內聯塊，文本對齊和邊距之前和沒有工作。非常感謝 – 253

如果你想回答@Bartdude，我會接受你的，因爲它很接近。認爲你的意思是將所有這些添加到鏈接中，但看看你的意思 - 唯一需要的是將'float：none'聲明爲'.bg.social a'來覆蓋addthis css。 – 253

基本上，你想要的是能夠在你的按鈕鏈接上使用text-align:center。問題是你無法做到這一點，因爲你浮動他們讓他們並排出現。

然後，我會建議將這些錨點的顯示更改爲display:inline-block（儘管它不受較舊的IE版本支持，但我不覺得它很重要，但也許您的目標受衆正在使用它），所以您可以使用父項的text-align:center，並且每個錨都有餘量。

或者，我建議只放一個右邊距或左邊距，並使用CSS僞類:last-child或:first-child，以便第一個或最後一個元素沒有該邊距。這不應該實際上使沒有明顯的區別，但你的CSS會更乾淨，現代化有點...

來源

2013-11-25 15:31:35

此解決方案適用。我沒有添加任何浮動或CSS，因爲它們來自addthis javascript/css，需要以正確的方式覆蓋。 – 253

嘗試設置margin到

.addthis_toolbox { 
    margin: 0 10%; // from 2 to 10% 
}

來源

2013-11-25 12:56:20

.addthis_toolbox { 
    margin: 0 5%; 
}

來源

2013-11-25 12:58:10

謝謝，在<1225px屏幕分辨率下，將鏈接分成另一行，並考慮到'.bg.social a {margin：0 4％;}' – 253

我清除了父級和子級div中的所有邊距和div。然後：

.bg.social a { width:20% }// divided to 5 equal part

和dicreased .addthis_toolbox.addthis_32x32_style跨度保證金{

.addthis_toolbox.addthis_32x32_style span {margin-left: 20px;}

一切正常。

來源

2013-11-25 13:09:47

感謝您的回覆，我之前嘗試了15％的等寬考慮到額外的邊距和填充，例如'.addthis_toolbox.addthis_32x32_style span {margin-left：20px}'。邊距應該都是百分比，但似乎無法創建寬度相同的鏈接以及邊距百分比/填充，適合流體寬度。 – 253

試試吧，添加到您的CSS：

div.foraddthis { 
    text-align: center; 
    width: 100%; 
} 
.addthis_toolbox { 
    display: -webkit-inline-box; 
    display: -moz-inline-box; 
    display: inline-flex; 
} 
.addthis_default_style .at300b { 
    float: none; 
}

和HTML：

<div class="foraddthis"> 
<!-- AddThis Button BEGIN --> 
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_facebook"></a> 
    <a class="addthis_button_twitter"></a> 
    <a class="addthis_button_google_plusone_share"></a> 
    <a class="addthis_button_pinterest_share"></a> 
    <a class="addthis_button_tumblr"></a> 

</div> 
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-529d1f4f354abd32"></script> 
</div> 
<!-- AddThis Button END -->

演示：http://jsfiddle.net/vPw7u/

來源

2013-12-03 16:27:02 Baron

Addthis共享填充/邊距

回答

相關問題