2

ナビゲーション バーに問題があり、ページ全体に伸びません。

コードは次のとおりです。

#nav {
  list-style: none;
  font-weight: bold;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}
#nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
}
#nav li {
  margin: 0px;
  display:
}
#nav li a {
  padding: 10px;
  text-decoration: none;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #000000;
  float: left
}
#nav li a:hover {
  color: #FFFFFF;
  background-color: #35af3b;
}
<div id="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Music</a>
    </li>
    <li><a href="#">Education</a>
    </li>
    <li><a href="#">Fun</a>
    </li>
    <li><a href="#">Entertainment</a>
    </li>
    <li><a href="#">Utilities</a>
    </li>
  </ul>
</div>

4

5 に答える 5

10

ここで何をしたいのかは明確ではありません。ナビゲーション バーをページ全体に表示したい場合は、背景色を親 div に追加し、この div を ul リスト要素と同じ高さにする必要があります。

#nav {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    background-color: #000000;
    height:40px;
}

私はフィドルをしました - http://jsfiddle.net/F6nMg/

于 2013-05-18T23:12:52.627 に答える
2

ナビゲーション バー (div) のコンテナーに背景色を配置します。その後、div中身が浮いているのでクリアフィックスを適用します。おそらく も使用できますdisplay: inline-blockが、そうする必要はありません。

#nav {
    background-color: #000000;
}

#nav:after {
    content: "";
    clear: both;
    display: table;
}

http://jsfiddle.net/ExplosionPIlls/DY6Nb/

于 2013-05-18T23:11:52.620 に答える