0

我的网站页脚出现一些问题

我希望 facebook like 按钮、twitter 按钮和语言选择器都对齐在同一级别（即，距页面底部几 px）。目前，正如您在图片中看到的，所有这 3 个元素都有不同的垂直对齐方式。你能帮我识别和解决这个问题吗？

底部对齐问题

HTML 代码：

<div id="footer">
<div id="social"><div class="fb-like" data-href="http://www.gregsitedfds.com" data-send="false" data-layout="button_count" data-width="106" data-show-faces="false" data-font="verdana"></div><a href="https://twitter.com/share" class="twitter-share-button" data-lang="msa">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
    <span class="languageselector"><a href="fr/" title="Version Française">FR</a> | <a href="en/" title="English Version">EN</a> | <a href="index.htm" title="Norway Version">NO</a></span></div>

CSS代码：

#footer
{
    position:fixed;
    bottom:0;
    color:#333;
    left:0;
    z-index:999;
    width:96%;
    text-align:right;
    padding:30px 2%;
}

#social
{
    position:absolute;
    vertical-align:middle;
    left:2%;
    color:#333;
}
4

2 回答 2

1

你需要有：

.fb_iframe_widget, 
iframe.twitter-share-button {
    display: inline-block;
    vertical-align: middle;
}

通过开发人员工具添加vertical-align: middle;解决了我的问题（display: inline-block;已经存在）。

为了也对齐语言菜单，您需要

span.languageselector {
    display: inline-block;
    height: 20px; /* same height as #social div */
    line-height: 20px; /* same as height */
}
于 2012-07-21T15:46:12.560 回答
0

使用 Safari 或 Chrome，您可以按 Cmd + Opt + I 调出 Web Inspector（又名开发者工具）。在元素选项卡下，您会找到放大镜图标，它是元素选择器。

使用元素选择器将鼠标悬停在元素上并单击以检查它们。

有了这个，您将看到每个按钮的最顶层或父元素具有以下类（以及其他类）：

.fb-like

和

.twitter-share-button

您现在可以为这些类编写 CSS 代码，并使用边距、填充或位置属性来调整按钮之一的位置，以使它们对齐。

会有很多方法来做到这一点。我能够通过选择.fb-like和使用来对齐它们top: -7px，但这可能不是最有说服力的解决方案。

您可以在检查器的右侧面板中对选定元素进行 CSS 更改，并查看这些更改实时反映在页面上。然后，您可以将相同的 CSS 代码复制到您网站的 CSS 中。

于 2012-07-21T16:18:07.177 回答