html - 使浮动社交图标垂直

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;这将垂直对齐图标。

为了使它们沿标题图像对齐，我会使用negative 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; }