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 に答える