Question

我喜欢的按钮位于我的页面正文上方，它们位于正确的位置，但与 对齐，代码很难看。我还需要在like-buttons上添加一个白色背景，因为如果你向下滚动我会让它们浮动页面，为此我还需要在like-buttons上设置一个“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设置样式按钮和推特以给它一些余地：

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

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

1 个答案: