首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将iframe与<p>对齐

将iframe与<p>对齐
EN

Stack Overflow用户
提问于 2014-03-07 18:39:11
回答 2查看 158关注 0票数 0

我正在使用twitter小工具,我想将它与我的文本对齐。不幸的是,我不能让它工作。

下面是我放在一起的jsfiddle:http://jsfiddle.net/9bB52/

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
#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 }

有谁知道怎么解决这个问题吗?

最好的

EN

回答 2

Stack Overflow用户

发布于 2014-03-07 18:50:51

看看这个-希望它能为你工作!

代码语言:javascript
复制
<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/

票数 0
EN

Stack Overflow用户

发布于 2014-03-07 18:54:52

这就是你要找的吗?

代码语言:javascript
复制
    #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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22247777

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档