css - 使用 CSS 定位社交网络按钮

Question

我正在使用此处找到的 Bootstrap 创建一个网站：

http://www.bestcastleintown.co.uk/wp/

我的问题是，在主页上，<header>如果你仔细观察，我的 Twitter 和 Facebook 社交网络按钮就在下方，并没有水平对齐。我希望通过class="like-btn"为包含 facebook 按钮的列表项创建一个单独的 CSS 类，我可以使它们水平对齐。

<div class="bs-docs-social">
  <div class="container">
    <ul class="bs-docs-social-buttons">
      <li class="like-btn">
          <!--facebook like button-->
      </li>
      <li class="follow-btn">
          <!--twitter follow button-->
      </li>
      <li class="tweet-btn">
          <!--twitter tweet button-->
      </li>
    </ul>
  </div>
</div>

但是，like 按钮的 facebook 代码似乎包含在包含一些 CSS 样式的 iframe 中，除非我的网站碰巧具有与 Facebook iframe 相同的匹配协议、域和端口，否则我不能因为相同的来源而无法修改它政策。

我注意到来自 facebook 的一条 CSS 规则，如果移除会使按钮看起来对齐，但边框会从类似按钮的底部移除，这是不可取的。

.pluginButtonSmall {
    padding: 0 5px 2px;
}

有什么我可以添加到我的.like-btn班级来解决问题，以便按钮水平对齐吗？

Answer 1

使用divs 代替ul>li并在社交容器元素上使用margin-toporpadding-top使它们水平对齐。通常您需要将它们移动一两个像素，因为并非所有社交按钮都具有相同的尺寸。

Answer 2

如果这是导致问题的原因；也许添加一条规则

.like-btn div {
    padding: 0px;
}

或者

.like-btn .pluginButtonSmall {
    padding: 0px;
}

Answer 3

您可能想尝试类似的 CSS 规则...

.like-btn, .follow-btn, .tweet-btn {
   float: left;
   display: inline-block;
 }

Answer 4

在getBootstrap.com的底部，他们有这个：

我使用 Chrome 的开发者工具查看格式来自这个 css 文件： http: //getbootstrap.com/assets/css/docs.min.css

它的顶部有一个许可证，允许我使用它。所以我下载了它并制作了自己的社交媒体页脚：

我发现这个线程是因为您使用与 getBootstrap.com 相同的类名，所以我猜您使用的是 bootstrap....