Showing bulletpoints in an inline unordered list [CSS, HTML]

When displaying an unordered list () as inline, you will lose the bullpoints. For times when you want to create a horizontal list with bullets, you can use a non-repeated background image, and positioning them next to your list items using CSS. I’ve included a JSFiddle at the end of this post.

Creating the HTML list

<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>

CSS

Set the unordered list’s margin and padding to 0, and remove any bullet points that might appear.

ul {
margin: 0;
padding: 0;
list-style-type: 0;
}

To create the horizontal list, set the list items to display inline. Add the bullet image using background-image (I’m hosting an example bullet on Imgur for now), set to no-repeat, position it using background-position, and give it a left margin:

li { 
    display: inline;
    background-image: url(http://i.imgur.com/qWICm4M.jpg);
    background-repeat: no-repeat;
    background-position: 0 .4em;
    padding-left: .6em;
}

Click here for a JSFiddle demo

Leave a Reply

wpDiscuz