在背景图片上添加填充

问题描述：

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>

低于总代码问题。在这里，我需要删除文本和图像“箭头”之前的空间。我将如何能够做到？

答

替换此CSS看看会发生什么

#nav li:hover 
    { 

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

答

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

我刚刚意识到您当前的css不正确，不会对您的html生效。你应该使用：

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

它确实不工作，我正在寻找 – 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;}

我不想删除图像。背景图片放置在左侧的角落。我希望有人在“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; 

}

使用，

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

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

答

UI元素也有默认样式尝试添加这个，如果你想删除所有

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

在背景图片上添加填充

相关推荐