0

順序付けられていないリスト内にラップされた 4 つの画像を使用して、単純なナビゲーション バーを作成しようとしています。

バーが整列していないため、問題が発生しています。バーがネストされている親 div に左パディングが割り当てられているかのように動作し、順序付けられていないリストを右に押しています。何が起こっているかの写真は次のとおりです。

ここに画像の説明を入力

何が起こっているのかを確認するために、メインのナビゲーション div に境界線を設定しました。

これが私のコードです：

<div id="container">
    <div id="header">
      <h1 class="hidden">Blue Ridge Fencing</h1>
    </div>
  <div id="navigation">
    <ul>
        <li><img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"></li>
        <li><img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"></li>
        <li><img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"></li>
        <li><img src="images/website_build/nav_bar/quote.jpg" width="235" height="50"    alt="Quote" border="0"></li>
    </ul>
  </div>
    <div id="content">

    </div>
</div>

そしてCSS：

#navigation {
    height: 50px;
    width: 1000px;
    background-image: url(../images/backgrounds/otis_redding.png);
    overflow: hidden;
    padding: 0px;
    border: 1px solid #000;
}

#container #navigation ul {
    margin: 0px;
    list-style-type: none;
    font-size: 34px;
}

#container #navigation li {
    float: left;
}

前もって感謝します！

4

2 に答える 2

2

<ul>要素には通常、ブラウザー (またはスタイルシートの 1 つ) によって設定されたデフォルトのパディングがあります。それを削除するだけです：

#navigation ul {
    padding:0;
}

まだ行っていない場合は、CSS リセットの使用を検討することをお勧めします。

于 2013-06-25T23:47:42.690 に答える
0

ul要素からパディングを削除する必要があります。cssにを追加することpadding: 0;で実行できます。#container #navigation ul

于 2013-06-25T23:48:20.537 に答える