Question

我在display:inline标签上使用CSS list-style-image:属性和<li>属性时遇到问题。基本上，我想输出以下内容：

* Link 1  * Link 2

其中*代表图片。

我正在使用以下HTML格式执行此操作：

<ol class="widgets">
    <li class="l1">Link 1</li>
    <li class="l2">Link 2</li>
</ol>

使用以下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); }

问题是当列表项以内联方式显示时，不会显示与列表项关联的图像。如果我取出display:inline标记上的<li>属性，则会显示。

即使列表项内联显示，或者只是不可能，有没有办法让图像显示？

Answer 1

尝试使用float: left（或right）代替display: inline。内联显示替换列表项显示，这是添加项目符号的内容。

Answer 2

您希望列表项彼此相邻排列，但不是真正的内联元素。所以反过来浮动它们：

ol.widgets li { 
    float: left;
    margin-left: 10px;
}

Answer 3

我有类似的问题，我解决使用css“：before”..代码看起来像这样：

.widgets li:before{
    content:"• ";
}

Answer 4

如果您在CSS规范中查看the 'display' property，您会看到'list-item'特别是显示类型。当您将项目设置为“内联”时，您将替换列表项的默认显示类型，并the marker is specifically a part of the list-item type。

上面的答案表明浮动，但我已经尝试过，但它不起作用（至少在Chrome上）。 According to the spec，如果您将框设置为向左或向右浮动，则“显示”将被忽略，除非它的值为“无”。我认为这意味着只要你浮动元素，'list-item'的默认显示类型就会消失（带标记）。

编辑：是的，我想我错了。见顶部条目。：）

Answer 5

你想要样式图像和导航相互导航，然后像这样使用

ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}

Answer 6

我建议不要使用list-style-image，因为它在不同浏览器中的行为完全不同，尤其是图像位置

相反，你可以使用这样的东西

ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }

它适用于所有浏览器，并且会在不同的浏览器中为您提供相同的结果。

CSS显示：带有list-style-image的内联属性：<li>标签上的属性</li>

6 个答案: