更新时间:2023-12-04 10:22:40
这将工作。不幸的是,您似乎需要在背景图片上使用!important
,通常***尽量避免。注意,某些旧版浏览器不支持nth-of-type。
This will work. Unfortunately it seems that you need to use !important
on the background-image which is usually best to try to avoid. Note, nth-of-type is not supported in some older browsers.
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
/* First Menu Item */
.dropdown-menu li:nth-of-type(1) {
background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important;
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 3px 5px;
padding-left: 5px;
}
/* Second Menu Item */
.dropdown-menu li:nth-of-type(2) {
background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important;
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 3px 5px;
padding-left: 5px;
}
JS小提琴: http://jsfiddle.net/syVk8/
编辑:好的,经过一点点澄清,结果是你不想让文字翻转。这是一个类似的例子,左边没有填充,一个叫做'ok'的类可以应用到不同的菜单项来添加复选框(或者你的图标可能是)。
Ok, after a little clarification it turns out you don't want the text shifting over at all. Here is a similar example with no padding on the left and a class called 'ok' that you can apply to different menu items to add the checkbox (or whatever your icon might be):
li.ok {
background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important;
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 3px 5px;
}
JS小提琴: http://jsfiddle.net/syVk8/2/