页脚背景颜色不延伸

Question

我必须使用html和Css进行google.com的简单克隆。该网站应该是非常基本的，搜索栏或任何链接都不必做任何事情。

这是git：https://github.com/orangespire/google-homepage

1. 页脚背景颜色不会延伸到整个页面。
2. 页脚链接应该位于每一侧，但它们都是左对齐的。
3. 顶部栏链接由于某种原因不起作用。

非常感谢任何帮助。

Answer 1

在底栏添加left和right。这需要处理1.和2.

#bottombar {
    ...
    left: 0;
    right: 0;
}

到#googlelogo，添加float。这需要照顾3.（注意还有其他更好的方法可以解决这个问题，但这似乎是最简单的）

#googlelogo {
    float: left;
    ...

Answer 2

  

页脚背景颜色不会延伸到整个页面。

这有两个原因。您还没有为body元素设置margin / padding，因此它有默认的margin / padding，这会导致边缘和内容之间的距离。由于一些浏览器使用边距和一些填充，您应该设置它们：

body {
  margin: 0;
  padding: 0;
}

另一个原因是绝对定位的元素不会填充父元素的宽度。当您将它们从流程中取出时，其大小取决于其内容，它只能保存内容所需的宽度。您可以将其添加到#bottombar规则中，使其占据整个宽度：

width: 100%;

  

页脚链接应该在每一侧，但它们都是   左对齐。

它们实际上是在每一侧对齐，但你不会看到它。由于底栏只有内容所需的大小，因此没有额外的空间来进行对齐。通过给底栏提供宽度，您将看到链接正确对齐。

  

顶部栏链接由于某种原因不起作用。

那是因为您已放置#googlelogo元素以覆盖链接。您可以首先将其添加到元素的规则中，以便将其放置在浮动顶部栏的下方：

clear: both;