0

为什么我的 UL 菜单与内容 div 重叠？我是否缺少分隔标题/内容的结构的一部分？

http://jsfiddle.net/DBdHs/

CSS

.wrapper { margin: 0 auto; width: 80%; margin-top: 2em !important; }

#top-nav {
    list-style-type: none;
    color: #f5f5f5;
}

#top-nav li {
    float:left;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    color: #414141;
}

#top-nav li span {
    padding-bottom: .4em;
    padding-left: 3em;
    padding-right: 3em;
}

#top-nav li:hover span{
    color: black;
    border-bottom: 5px solid #FF9A00;
    cursor: pointer;
}

#content {
    margin: 0 auto;
    background:#fff;
    border: 1px solid #eaeaea;
    min-height: 150px;
    padding: 25px;
}

.row { width: 100%;}​

<div class="wrapper">
  <header>
    <div class="row">
      <ul id="top-nav">
        <li><span>home</span></li>
        <li><span>photos</span></li>
        <li><span>projects</span></li>
        <li><span>about me</span></li>
      </ul>
    </div>
  </header>

<div id="content">Welcome to my home on the internet.</div>
</div>​
4

2 回答 2

3 
header {
    overflow: hidden;
}

将此添加到您的 CSS 中。

你没有清理你的花车。clear: both;您可以在菜单后添加一个清除 div ( )，或者添加overflow: hidden; 到你的标题。

这是一个演示 - http://jsfiddle.net/spacebeers/DBdHs/1/

于 2012-09-18T16:06:50.097 回答
1

放入#content{clear:both;}你的CSS，所以身体将始终保持在标题下方。

于 2012-09-18T16:08:41.923 回答