CSS 为 li 使用背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/646764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using background image for li
提问by Yasir
I'm using a background image for a <li>that will be used as a button, but it's not fully shown; however, when write text then it shows.
I don't want text to be written it's already printed on background image. I am unable to set a width - how can I fix this?
我正在使用<li>将用作按钮的背景图像，但它没有完全显示；但是，当写入文本时，它会显示。我不想写文字，它已经印在背景图像上。我无法设置宽度 - 我该如何解决？
#footernav li#footerlocation
{
display: inline;
padding-right: 20px;
background-image: url(../images/ourlocation.jpg);
background-repeat: no-repeat;
background-position: 0 -.2em;
}
回答by Matt Howell
Your problem is in setting display to inline. If you want background and width, but you also need an inline-type list, set float: left.
您的问题在于将显示设置为内联。如果你想要背景和宽度，但你还需要一个内联类型的列表，设置浮动：左。
回答by superUntitled
Take a look at the following example:
看看下面的例子：
ul#footernav li {
display:inline;
}
ul#footernav li a{
display:block;
width:155px;
text-indent:-9999px;
}
ul#footernav li.footerlocation a{
height:30px ;
background: url('images/image.jpg') bottom left no-repeat;
}
ul#footernav li.footerlocation a:hover{
height:30px ;
background: url(images/image.jpg) top left no-repeat;
}
回答by meetsankar
Yes i have the same problem, i just removed css style display: inlineand add display: list-item; float:left;my problem solved, hope this helps.
是的，我有同样的问题，我刚刚删除了 css 样式display: inline并添加了display: list-item; float:left;我的问题解决，希望这会有所帮助。
Thanks, Sankar B
谢谢，桑卡尔 B
回答by Gopal Gautam
May be help in this
可能会有所帮助
.tab-content ul li{display: block;padding-left: 30px;background-image:url('images/blue-icon.png');background-repeat: no-repeat;background-position: 0 2px;margin-bottom: 10px;}
回答by Sruly
set the width and height for the image
设置图像的宽度和高度
回答by MiPhyo
We can simply add the following css rule:
我们可以简单地添加以下css规则：
ul.check-list{
list-style-image: url(images/tick.jpg);
}
