css - 如何在我的网站上对齐 <div> 元素之间的点赞按钮并为它们添加白色背景？

Question

我的赞按钮在我的 page-body 上方，它们在正确的位置但与   对齐并且代码很丑陋。我还需要只为点赞按钮添加白色背景，因为如果您向下滚动，我会让它们随页面 float ，为此我还需要为点赞按钮设置一个“div id”。我怎样才能将喜欢的按钮与 CSS 对齐到它们现在所在的相同位置，并为它们设置一个“div id”？我还需要它们垂直对齐，因为 facebook 按钮比 google 和 twitter 低一点。 例如，如果您访问此页面:http://www.cumseface.eu/viewtopic.php?t=187 ，您可以在广告正下方看到点赞按钮。我是 CSS 和 HTML 的初学者，所以如果你能提供帮助，请具体说明。抱歉我的英语不好，在此先感谢您。

这是我在按钮部分使用的 HTML 代码:

<div class="topic-actions">

<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
    <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>
<!-- ENDIF -->
</div>

<!-- IF S_DISPLAY_SEARCHBOX -->
    <div class="search-box">
        <form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
        <fieldset>
            <input class="inputbox search tiny"  type="text" name="keywords" id="search_keywords" size="20" value="{L_SEARCH_TOPIC}" onclick="if(this.value=='{LA_SEARCH_TOPIC}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_TOPIC}';" />
            <input class="button2" type="submit" value="{L_SEARCH}" />
            {S_SEARCH_LOCAL_HIDDEN_FIELDS}
        </fieldset>
        </form>
    </div>
<!-- ENDIF -->

    <div class="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<fb:like href="{U_PAGE_URL}" show_faces="false" data-href="https://developers.facebook.com/docs/plugins/" data-width="500" font="arial" data-layout="button_count"></fb:like>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="g-plusone" data-size="medium"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="CumsefaceEU" data-lang="ro">Tweet</a>

    <!-- IF PAGINATION or TOTAL_POSTS -->
        <div class="pagination">
            <!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --><a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->{TOTAL_POSTS}
            <!-- IF PAGE_NUMBER --><!-- IF PAGINATION --> &bull; <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a> &bull; <span>{PAGINATION}</span><!-- ELSE --> &bull; {PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
        </div>
    <!-- ENDIF -->

  </div>
</div>
<div class="clear"></div>

编辑:我将代码编辑为如下所示:

    <div id="likebuttons"><fb:like href="{U_PAGE_URL}" show_faces="false"  
    data-href="https://developers.facebook.com/docs/plugins/" data-width="500" font="arial" data-layout="button_count"></fb:like>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="g-plusone" data-size="medium"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="CumsefaceEU" data-lang="ro">Tweet</a>
</div>

然后像这样添加 CSS:

#likebuttons {
margin-left: 147px;
width: 350px;
background: #FFF;
text-align: center;
float: left;
padding: 2px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px; 
z-index: 10;
}

但“Facebook”按钮与其他按钮不一致 2. 可以解决吗？谢谢。

已解决:使用 facebook 按钮，在 CSS 中添加此代码:

.fb_iframe_widget { vertical-align:top;}

Answer 1

有一个很棒的网站。我一直在用它:

它叫做分享这个: http://www.sharethis.com/get-sharing-tools/#sthash.0aAa3jqv.dpbs

获取您网站上按钮的代码，它看起来像这样:

<span class='st_sharethis_hcount' displayText='ShareThis'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
<span class='st_email_hcount' displayText='Email'></span>

然后使用 css，您可以按照自己的方式分别设置样式。

更新:

在你的代码中你有一个错误:

<div class="text-align: center;">

text-align:center;是一种风格而不是一种风格......你需要先说 <div style="text-align: center;">或者让它成为一个类并在你的 css 中添加样式:

接下来，删除所有  在按钮附近的代码中。

然后将此添加到您的 css 以设置 FB 按钮和 twitter 的样式以给它一些边距:

.fb_iframe_widget {margin-right:25px;}
.twitter-share-button {margin-left:25px;}