0

このコードで誰かを助けてください。

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>

以下のコード全体。ここでは、テキストと画像「矢印」の前のスペースを削除する必要があります。どうすればできるようになりますか？

4

5 に答える 5

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

私はあなたの現在のcssが正しくないことに気づきました、それはあなたのhtmlに影響を与えないでしょう。次を使用する必要があります。

li.nav{
   padding-left: 20px;
}
于 2012-05-08T05:36:36.243 に答える
1

この CSS を置き換えて、何が起こるか見てみましょう

#nav li:hover
    {   

        background: url("../image/arrow.png") no-repeat scroll 4px 10px #3EBBEC; 
        color: #FFFFFF;
    }
于 2012-05-10T08:30:44.813 に答える
0

以下のこのコードは機能しません....

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

.nav li: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-08T05:46:58.163 に答える
0

画像を削除するには、この行を削除する必要があります

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

これを行うために必要なスペースについて：

li {float:right; display:block;}
于 2012-05-08T05:40:22.660 に答える
0

ul 要素にもデフォルトのスタイリングがあります。すべてのスペースを削除する場合は、これを追加してみてください

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;
}

これも必要かもしれません：

ul{
margin:0px;
padding:0px;
list-style-type: none;
}
于 2012-05-08T05:53:48.090 に答える