2

私が取り組んでいるこのウェブサイトを見てください: new.AudioManiacProductions.com

divを示す Dreamweaver のスクリーンショットは、ここにあります: new.AudioManiacProductions.com/images/stack.png

How to ナビゲーション バーが中央に配置されておらず、「ホーム」の意図が左側にあることに注意してください。ナビゲーション バーを親コンテナーのスパン全体に伸ばし、垂直方向と水平方向の両方に中央揃えする必要があります。

ページのナビゲーション セクション、ナビゲーション リスト項目、およびリンク用の CSS を次に示します。

#nav {
    width: 100%;
    height: 40px;
    margin:  0 auto;
    padding: 0px;
    text-align: center;
    color: #FFF;
    list-style: none;
    line-height: auto;
    verticle-align: middle;
}
#nav li {
    padding: 0px;
    display: block;
    width: 20%;
    list-style-type: none;
    float: left;
    text-align: center;
    overflow: hidden;
    line-height: auto;
    verticle-align: middle;
}
#nav li a {
    font-size: 18px;
    font-weight: 600px;
    text-decoration: none;
    font-weight:800;
    color:#FFF;
}
#nav li a:hover, a:visited {
    color: #00F;
}

そして、ここに私のHTMLがあります:

<div id="nav">
  <ul>
<li><a href="index.php?home">Home</a></li>
    <li><a href="index.php?about">About Us</a></li>
    <li><a href="index.php?packages">Packages</a></li>
    <li><a href="index.php?quote">Quote</a></li>
    <li><a href="index.php?contact">Contact Us</a></li>
  </ul>
  </div>

どんな助けでも大歓迎です！

4

1 に答える 1

1

ブラウザーは、デフォルトで UL タグに padding-left を設定します。パディングを取り除くと、それが助けになるはずです。

#nav ul {
    padding-left: 0;
}

または、すべてのパディングをクリアします:

#nav ul {
    padding: 0;
}
于 2013-01-09T19:32:28.233 に答える