ul元素的背景涵盖了整个页面

Question

而不是我的背景仅作为ul元素中4种不同类型陶器的背景，红色背景覆盖了我的名字和导航栏。它为什么这样做？我试图让一切相对定位，但似乎没有什么区别。为什么ul元素不跟随文档的流程，它应该位于我的名字和导航下面。

请提供建议，请参阅此处的示例：example

Answer 1

浏览者在浮动DIV的高度上遇到困难。最简单的方法是：

<div style="clear:both;"></div> 

标签后

。

Answer 2

如果我的问题正确，那么这就是解决方案

检查这个更新的小提琴：http://jsfiddle.net/4GUkU/2/

注意：请告诉我是否落后于此，以便我可以根据要求进行更改。

Answer 3

到处都是红色

#featured {
  ...
  background-color:Red;
  ...
}

UL显示在“The Pottery Club”下方和导航链接（在Chrome中）。您使用的是哪种浏览器？

Answer 4

顺便说一下，在语义上你不需要在标签中使用

。标签已经垂直解释，除非您选择使用CSS。

您可以像这样重写导航菜单：

<nav id="nav-main">
    <a title="Book Class" href="">Book Class</a>
    <a title="Plan your visit" href="/visiting">Plan your visit</a>
    <a title="Contact us" href="/visiting">Contact us</a>
</nav>

如果你保留了

，盲人的读者会读给他/她：“导航，无序列表，列表项......”非常有道理。