Question

HTML

<ul>    
    <li class="socialHeader"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://thedomain">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </li>
    <li>
        <div class="g-plusone" data-size="medium"></div>
    </li>    
</ul>

CSS：

li, ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
}

.g-plusone, .twitter-share-button {
    margin: 0;
    padding: 0;
}

输出

http://jsfiddle.net/4235gcL9/

如何让图标水平相互冲洗？我在浏览器控制台中看到，每个动态生成的按钮附带的javascript包含一些宽度属性，但我不确定如何访问它们。

Answer 1

这是width: 109px

的iframe

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="..." class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 109px; height: 20px;"></iframe>

将宽度减小到更小（如85px）以固定间距：

iframe{
   width: 85px !important; //the important is needed to override the inline width
}

FIDDLE

Answer 2

这是代码生成的iframe元素的WIDTH，我的猜测是它留下足够的空间让计数器到达1000并且不会被切断！它生成内联宽度。你可以做到这一点，但这是一个坏主意。

#twitter-widget-0 {width:81px !important;}

什么在这些社交媒体按钮中产生边距？

2 个答案: