html - 显示 : inline and list-style-image with ASP. NET MVC

Question

我看到有一些解决方案可以同时使用“显示内联”和“列表样式图像”(比如留下 float 图像而不是使用显示内联或内联 block )但我必须一起使用它们。

更具体地说:

我在数据库中为我的文章创建了一个 foreach block ，用于将它们的 hadlines 链接到指定的标签中，它工作得很好。 (我已经测试了30个以上的网站。)

除非，根据设计问题，这次这些链接必须内联显示，而且我必须用指定的图像更改它们的列表元素符号。

当我使用 list-style-image "without (!)"using display: inline 或 display: inline-block 时，它工作得很好。但是，您可以猜到，它们是真实列出的。

我需要同时使用这两个 CSS 代码。我知道它更像是一个 HTML/CSS 主题而不是 ASP.NET MVC，但如果任何 ASP.NET MVC 程序员知道答案，我将非常感激。

感谢您的阅读，感谢您的帮助...

Answer 1

除了 display:inline-block 你还需要在你的 li 上指定 float:left。

list-style-image 将与它无关，可以一起使用:

li { 
    display:inline-block;
    float:left;
    list-style-image:url(....
}

您也可以通过指定 list-style-type:none 来使用背景图片。不过，您必须提供左内边距。

li { 
    list-style-type: none;
    display: inline-block;
    float: left;
    margin: 0px 24px;
    padding-left: 24px;
    background: url(http://placehold.it/16x16) no-repeat left center;
}