使浮动的社会图标垂直

Question

我正在这个网站上工作：http://www.bedriftsdesign.no并得到了两件我正在努力的事情：

首先，标题左侧的浮动社交图标不会垂直对齐。我正在使用display：block并且有点不确定我做错了什么？

其次（可选）我更喜欢它们位于包装器外部的背景元素上，但不确定如何使其工作？

关于如何解决这个问题的任何建议都非常受欢迎。

由于

Answer 1

您正在浮动列表元素li并尝试通过为包含的锚点display: block设置a来撤消它。

您不应该首先将li设置为float: left;。

Answer 2

查找此规则

#social li { float: left; list-style-type: none; display:block; }

并删除float:left;这将垂直对齐图标。

为了沿着标题图像对齐它们，我会使用否定的margin。找到这条规则：

#social{ background: transparent; margin: 0; }

并将保证金更改为margin: -35px;

Answer 3

问题1的答案只需从float:left;移除#social li，根据您的要求进行操作： - 参见附件

<强> CSS

#social li {
    display: block;
    list-style-type: none;
}

问题2的答案

我认为你这样看： -

<强> CSS

#social {
    background: none repeat scroll 0 0 transparent;
    left: 177px;
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 12;
}

Answer 4

不确定你的意思是垂直对齐它们。你希望他们对齐什么？

如果你想让他们从最低点变化：

#social li { float: none; }