Question

请使用此代码帮助我。

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>

以下总代码。在这里，我需要在文本和图像“箭头”之前删除空格。我怎么能这样做？

Answer 1

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

我刚刚意识到你当前的css不正确，这对你的html没有影响。你应该使用：

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

Answer 2

替换此CSS并查看会发生什么

#nav li:hover
    {   

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

Answer 3

删除您必须删除此行的图片

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

关于你需要做的空间：

li {float:right; display:block;}

Answer 4

以下代码ll永远不会工作....

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

Answer 5

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

在背景图片上添加填充

5 个答案: