Html CSS display:inline property with list-style-image: <li> 标签上的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/354288/
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
CSS display:inline property with list-style-image: property on <li> tags
提问by mipadi
I'm having a problem using CSS's display:inlineproperty with the list-style-image:property on <li>tags. Basically, I want to output the following:
我在使用display:inline带有标签list-style-image:属性的CSS属性时遇到问题<li>。基本上，我想输出以下内容：
* Link 1 * Link 2
where *represents an image.
其中*代表一个图像。
I'm doing this with the following bit of HTML:
我正在使用以下 HTML 代码执行此操作：
<ol class="widgets">
<li class="l1">Link 1</li>
<li class="l2">Link 2</li>
</ol>
which is styled with the following bit of CSS:
使用以下 CSS 样式进行样式设置：
ol.widgets { list-style-type:none; }
ol.widgets li { display:inline;
margin-left:10px; }
ol.widgets li.l1 { list-style-image:url(image1.gif); }
ol.widgets li.l2 { list-style-image:url(image2.gif); }
The problem is that when the list items are displayed inline, the images associated with the list items do not appear. They doappear if I take out the display:inlineproperty on the <li>tag.
问题是当列表项内嵌显示时，与列表项关联的图像不会出现。如果我取出标签上的财产，它们确实会出现。display:inline<li>
Is there a way to make the images appear even when the list items are displayed inline, or is that just impossible?
有没有办法使图像即使在列表项内嵌显示时也能显示，或者这是不可能的？
回答by annakata
Try using float: left(or right) instead of display: inline. Inline display replaces list-item display, which is what adds the bullet points.
尝试使用float: left(或right) 代替display: inline. 内联显示取代了列表项显示，这是添加项目符号点的内容。
回答by flamingLogos
You want the list items to line up next to each other, but not really be inline elements. So float them instead:
您希望列表项彼此相邻排列，但不是真正的内联元素。所以改为浮动它们：
ol.widgets li {
float: left;
margin-left: 10px;
}
回答by Angelo Berzacola
I had similar problem, i solve using css ":before".. the code looks likes this:
我遇到了类似的问题，我使用 css ":before" 解决了.. 代码如下所示：
.widgets li:before{
content:"? ";
}
回答by CSS Guy
You want style image and Nav with float to each other then use like this
您希望样式图像和导航相互浮动，然后像这样使用
ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
回答by Jesse Millikan
If you look at the 'display' propertyin the CSS spec, you will see that 'list-item' is specifically a display type. When you set an item to "inline", you're replacing the default display type of list-item, and the marker is specifically a part of the list-item type.
如果您查看CSS 规范中的 'display' 属性，您会发现 'list-item' 专门是一种显示类型。当您将项目设置为“内联”时，您将替换 list-item 的默认显示类型，并且标记特别是 list-item type 的一部分。
The above answer suggests float, but I've tried that and it doesn't work (at least on Chrome). According to the spec, if you set your boxes to float left or right,"The 'display' is ignored, unless it has the value 'none'." I take this to mean that the default display type of 'list-item' is gone (taking the marker with it) as soon as you float the element.
上面的答案建议浮动，但我已经尝试过了，但它不起作用（至少在 Chrome 上）。根据规范，如果您将框设置为向左或向右浮动，“'display' 将被忽略，除非它的值是 'none'。” 我认为这意味着一旦您浮动元素，“列表项”的默认显示类型就消失了（带有标记）。
Edit: Yeah, I guess I was wrong. See top entry. :)
编辑：是的，我想我错了。请参阅顶部条目。:)
回答by Liwen
I would suggest not to use list-style-image, as it behaves quite differently in different browsers, especially the image position
我建议不要使用list-style-image，因为它在不同浏览器中的表现完全不同，尤其是图像位置
instead, you can use something like this
相反，你可以使用这样的东西
ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }
it works in all browsers and would give you the identical result in different browsers.
它适用于所有浏览器，并会在不同浏览器中为您提供相同的结果。
