Question

我看到有一些解决方案可以同时使用“显示内联”和“列表样式图像”（如浮动图像而不是使用显示内联或内联块），但我必须一起使用它们。

更具体一点：

我有一个foreach块用于我在databese的文章中创建与他们的直线链接到指定标签的链接，它工作得很好。（我在30个网站上测试了它。）

除非根据设计问题，这次必须以内联方式显示这些链接，并且我必须使用指定的图像更改其列表项目符号。

当我使用list-style-image“without（！）”使用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;
}

使用ASP.NET MVC显示：内联和列表样式图像

1 个答案: