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