CODEWITHSUNDEEP
htmlasp.net-mvccss
Cromwell
Cromwell

Reputation: 506

display: inline and list-style-image with ASP.NET MVC

I see that there are some solutions for using "display inline" and "list style image" together (like floating images left instead of using display inline or inline block) but i have to use them together.

To be more specific:

I have a foreach block for my articles in databese to create links with their hadlines into specified tag and it is working perfectly. (I have tested it above 30 website.)

Unless, according to design issues, this time those links must have to be displayed inline and also i have to change their list bullets with a specified image.

When i use list-style-image "without (!)" using display: inline or display: inline-block, it is working perfectly fine. But, as you can guess, they are listing veritacally.

I need to use this two CSS code together. I know its more like a HTML/CSS subject not ASP.NET MVC, but i will be very greatful if any ASP.NET MVC programmer knows the answer.

Thank you for reading, thank you for your helps...

Upvotes: 0

Views: 1758

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

Apart from display:inline-block you also need to specify float:left on your li.

list-style-image will have nothing to do with it, you can use it together:

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

You can also use background-image instead by specifying list-style-type:none. You have to provide left padding though.

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;
}

Upvotes: 1

Related Questions