html - CSS 引き戸が機能しない

Question

これはおそらくばかげた質問ですが、Google で答えを見つけることができません。画像の左側は問題なく表示されますが、私の人生では正しい画像を表示することはできません。

HTML/CSS の初心者で、基礎を学んでいます。

http://bungle.ca/ http://bungle.ca/images/

<ul id="nav">
   <li><a href="#">Link One</a></li>
   <li><a href="#">Link Two</a></li>
   <li><a href="#">Link Three</a></li>
   <li><a href="#">Link Four</a></li>
   <li><a href="#">Link Five</a></li>
   <li><a href="#">Link Six</a></li>
</ul>

#nav{
min-width:  1024px;
height: 30px;
padding:    0px;
margin: 0px;
color:  #eeeeee;
white-space:    nowrap;
list-style-type:    none;
}

#nav li{
display:    inline;
background: url('../images/tabRight.png') no-repeat right   top;
}

#nav li a{
padding:    .2em    1em;
height: 30px;
width:  100px;
text-decoration:    none;
float:  left;
text-align: center;
background: url('../images/tabLeft.png')    no-repeat   left    top;
}

Answer 1

のパディング#nav li aにより、tabLeftの背景画像をのtabRightの背景画像の上にオーバーレイできます#nav li。

要素に追加margin-right: 10px;してみてください#nav li a。ここで、10pxはtabRight.png画像の実際の幅です。padding-right: 10px;または、#nav li要素に追加することもできます。#nav li aボタンが適切な寸法になるように、それに応じて適切なパディングを調整する必要があります。

これが私がいつも使っている引き戸のコードです：

<li><a href="#" class="oneup">See Our Breads</a></li>

li {
    background: url(img/button_gold_right.gif) top right no-repeat;
    padding: 0 10px 0 0; /* 10px is width of _right.gif image)
    display: block;
    height: 23px; /* height & line-height the same so text centered vertically */
    line-height: 23px;
    float: left;
}

li a {
    display: block;
    background: url(img/button_gold_left.gif) top left no-repeat;
    padding: 0 0 0 10px; /* 10px on left so text is centered horizontally */
}

Answer 2

余談: CSS をデバッグする良い方法は、Mozilla または Chrome でfirebugまたは Inspect 要素を使用することです。要素の検査をトリガーするには、ブラウザで右クリックし、要素の検査を押します。右側では、属性を変更して css を変更できます。要素検査コンソールで要素をクリックすると、各要素の特定の css 属性を表示できます。

あなたのナビゲーションを見ると、その寸法は現在0 x 0であるため、画像を表示するスペースがありません

コードを次のように変更すると

    #navli{
    表示ブロック;
    幅: 250px;
    高さ: 30px;
    background: url('../images/tabRight.png') no-repeat 右上;
    }

tabRight 画像が表示されるようになりました。

Answer 3

display:inline-block;#nav liに追加するだけ