背景画像に埋め込みを追加する

CSSコード

#nav, #nav ul 
      { 
       width:1000px; 
       background-color: #F3F3F3; 
       margin: 0 auto; 

      } 


    #nav li 
     { 
      float: left; 
      padding-top:3px; 
      height:20px; 
      text-align:left; 
      text-transform:uppercase; 
      position: relative; 
      display: block; 
      font-family: Tahoma; 
      font-size: 10px; 
      font-weight:bold; 
      text-align: left; 
      text-decoration: none; 
      padding:10px 15px 0 15px; 
      background:url(../image/border.png) no-repeat right center; 
     }

そして私は

#nav li:hover 
    { 

     background: #3EBBEC url(../image/arrow.png) no-repeat left; 
     color: #FFFFFF; 
     margin:0 auto; 
    }

HTMLコード

<html> 
<head>Test Page</head> 
<body> 
<ul> 
<li id="nav">test1</li> 
<li id="nav">test2</li> 
</ul> 
</body> 
</html>

以下の合計コードに問題があります。ここでは、テキストと画像 "Arrow"の前にスペースを削除する必要があります。私はどのようにすることができますか？

出典

2012-05-08 Jhilom

これを置き換えます。あなたはまた、これはお勧めしますすべてのスペース

ul{ 
    margin:0px; 
    padding:0px; 
} 
li.nav{ 
    padding:0px; 
    margin: 0px; 
} 

li.nav:hover{ 
    background:url(images/arrow.png) no-repeat left center; 
    text-align:center; 
    margin: 0 auto; 
}

を削除する場合使用、

li.nav 
{ 
    padding:0px; 
    margin: 0px; 
} 

li.nav:hover 
{ 
    background:url(images/arrow.png) no-repeat left center; 
    text-align:center; 
    margin: 0 auto; 
}

出典

2012-05-10 08:30:44 Jhilom

.nav li{ 
    padding-left: 20px; 
}

あなたの現在のCSSが正しくないことが判明しました。これはあなたのHTMLには効き目がありません。あなたが使用する必要があります。

li.nav{ 
    padding-left: 20px; 
}

出典

2012-05-08 05:36:36 killebytes

それはしました私が探していたものは動作しません – Jhilom

あなたの質問を編集したことがわかりました。あなたはCSSが動作しません。私の[jsFiddle]（http://jsfiddle.net/killerbytes/YGVkp/）をチェックしてください。 – killebytes

はい@killbytesあなたは本当にそれをほとんど作ったのです。しかし、どうすれば赤い矢印とテキストの間のギャップを減らすことができるのか教えてください。赤い矢印がテキストのすぐ横に表示され、それらの間にギャップがないようにします。左の中心の属性は、私が欲しくない主な問題は何ですかコーナーに画像を入れて – Jhilom

を画像を削除するには、あなたがこの行にスペースについて

background:url(images/arrow.png) no-repeat left center;

を削除する必要がありますが、これを実行する必要があります。

li {float:right; display:block;}

出典

2012-05-08 05:40:22 shnisaka

イメージを削除したくありません。背景画像が左隅に配置されています。私は、画像が "test1"または "test2"の直前に収まる場所を特定したい。私はすべてを試みたが、失敗した。 – Jhilom

以下このコードは決してっ仕事.........

.nav li 
{ 
    padding:0px; 
    margin: 0px; 
} 

.nav li:hover 
{ 
    background:url(images/arrow.png) no-repeat left center; 
    text-align:center; 
    margin 0 auto; 

}

ul{ 
margin:0px; 
padding:0px; 
list-style-type: none; 
}

出典

2012-05-08 05:46:58

UL要素は、デフォルトのスタイリングは、これを追加してみてくださいましたCSSは何が起こるかを見る

#nav li:hover 
    { 

     background: url("../image/arrow.png") no-repeat scroll 4px 10px #3EBBEC; 
     color: #FFFFFF; 
    }

出典

2012-05-08 05:53:48

背景画像に埋め込みを追加する

答えて

関連する問題