Question

我正在使用推特小部件，我希望将其与我的文本对齐。不幸的是，我无法让它发挥作用。

这是我放在一起的jsfiddle：http://jsfiddle.net/9bB52/

HTML：

<div id="share">
<div class="wrapper clearfix">
<p>
<b>My text here!</b>
</p>
<div class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="80"/>
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://" class="twitter-share-button twitter-tweet-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 107px; height: 20px;"/>
<p/>
</div>
</div>

CSS：

#share {
    background: blue;
    padding: 5px 0;
    width: 100%;
    text-align: center;
    margin-bottom: 120px }

#share .wrapper {
    width: 650px;
    width: 100%;
    text-align: center; }

#share p {;
    margin-top: 2px;
    margin-right: 10px; }

#share p b {
    color: #fff; }  

#share .facebook-share, #share .twitter-share {
    float: left;
    width: 100px;
    vertical-align: top }

有没有人知道如何解决这个问题？

最佳

Answer 1

检查一下 - 希望它适合你！

<div id="share">
<div class="wrapper clearfix">
<p>
<div style="width:250px;margin-left:auto;margin-right:auto;">    
<div style="width:120px;float:left;"><b>My text here!</b></div>
<div style="float:left" class="fb-like" data-layout="button_count" data-send="false"    data-show-faces="false" data-width="80"/>
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true"    src="http://platform.twitter.com/widgets/tweet_button.1393899192.html#_=1394188375300&count=horizontal&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Flocalhost%3A3000%2F&size=m&text=Be%20part%20of%20the %20Startup%20Solidarity%20Movement%20and%20get%20the%20Startup%20Pack%20for%20Marketers%20worth%20more%20than%20%245.000%20for%20free!&url=http%3A%2F%2Flocalhost%3A3000%2F"  class="twitter-share-button twitter-tweet-button twitter-count-horizontal" title="Twitter  Tweet Button" data-twttr-rendered="true" style="width: 107px; height: 20px;"/>
<p/>
</div>
</div>
</div>


#share {
    background: blue;
    padding: 5px 0;
    width: 100%;
    text-align: center;
    height:50px;
    margin-bottom: 60px }

#share .wrapper {
    width: 650px;
    width: 100%;
    text-align: center; }

#share p {;
    margin-top: 2px;
    margin-right: 10px; }

#share p b {
    color: #fff; }  

#share .facebook-share, #share .twitter-share {
    float: left;
    width: 100px;
    vertical-align: top }

看看这个：http://jsfiddle.net/9bB52/

Answer 2

这是你要找的吗？

    #share {
    background: blue;
    padding: 5px 0;
    height:30px;
    width: 100%;
    text-align: center;
    margin-bottom: 120px }

#share .wrapper {
    width: 650px;
    width: 100%;
    text-align: center; }
p {
    position:relative;
    float:left; 
    margin-top:2px;
    margin-right:10px;
    margin-left:120px;
}

#twitter-widget-0 {
    float:left;
    text-align:center;
}

DEMO

将iframe与<p> </p>对齐

2 个答案: