Question

我最近启动并运行了我的网站。我此刻有点匆忙，有人能告诉我一种设计div的方式，所以它们都是水平显示的。我把它们都放在了div中。

＆＃13;

#questionTitleDiv { width: 280px; height: 70px; margin: 10px 0px 10px 0px; padding: 10px 0px 10px 10px; border: 1px solid #FFFFFF; background-color: #F3F781; border-radius: 10px;}

#questionTitleDiv h2 { font-size: 18px;}

#shareButtonDiv { display: inline;}

#facebookSharer { display: inline;}

#twittertweet { display: inline;}

#google+Share { display: inline;}

#questionAnswerDiv { width: 250px; margin: 0px 0px 10px 0px; padding: 10px 20px 10px 20px; border: 1px solid #FFFFFF; background-color: #F3F781; border-radius: 10px;}

＆＃13;

<div id="questionTitleDiv">
  <h2>Question?</h2>
  <div id="shareButtonsDiv">
    <div id="facebooksharer" class="fb-share-button" data-href="http://www.example.com/examplehtml" data-layout="button_count"></div>
    <div id="twittertweet"><a class="twitter-share-button" href="http://www.example.com/example.html" data-related="carpetinfo_com" data-size="medium" data-count="horizontal" data-counturl="http://www.example.com/example.html">Tweet</a></div>
    <div id="google+Share" class="g-plus" data-action="share" data-annotation="bubble"></div>
  </div>
</div>
<div id="questionAnswerDiv">
  <p>answer!!</p>
</div>

＆＃13;

当他们显示时，facebook div比其他人低一点。我已经尝试过绝对定位它们，包含div相对定位，因此它保持在页面流中。但他们都混乱起来。垂直对齐不会对它们起作用。并且保证金顶部或填充顶部也不起作用，我有点卡住和匆忙。

Answer 1

一个简单的float可以为你工作吗？

#shareButtonsDiv div{
    float:left;
}

http://jsfiddle.net/su3wt0hy/

社交分享按钮的CSS

1 个答案: