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