Using CSS to Display a List Inline

I’m a developer with several years of experience, but I’ll be the first to tell you, using CSS to display a list inline is not always an easy task.

But first a quick overview. Lists are everywhere. And for two good reasons. One, humans love them. Secondly, they are part of the semantic web. I’m speaking technically of HTML tags ol, ul and li.

Now usually I would shy away from doing a post about such a specific technical issue that only a few would be interested in. But because I’ve struggled with them, I will dedicate this post to providing some solutions.

By the way, if you are doing lists on your web page and not using these tags, you could be hurting your SE rankings. So their very important.

OK here we go.

A simple unordered list:

A simple ordered list:

The difference between these two is, the first is bulleted and the second is numbered. You can change the type of bullets for <ul>, or even remove it. You can also remove the numbers for <ol>.

Let’s get to the core issue, displaying the list inline…that means on the same line from left to write. It of course wraps at the end of the line if more list items are present. I will show you how to get this baby working like a charm.

First create your list using ul or ol. Give the ul tag a class or id and give the same class to li tags (this is common, but not required. You can add unique classes or id’s to the li tags, but this  makes it harder to style). Do not give the li tags the same class or id as the ul tags. These must be different.

Add the li items and then head over to the css file to make some minor adjustments.

In the CSS file add the id and class styling like this:

That should make the list display inline. If this doesn’t happen then their might be a conflict. To resolve, try moving the codes above to the bottom of the file bellow all other style info. If that still doesn’t work, it could be another style sheet loaded after the one your editing that might be negating your changes.

In that case you might need to find a quick fix and add the styling directly to the elements. Here is an example:

Obviously this is not the best way to do it, but if this is causing a problem and you are pressed for time, then it should work. Please be aware that styling in the HTML page itself may not work in HTML strict.

You can do styling for ul and ol tags the same way.

You will still have bullets and numbers showing. To remove these, simply add “list-style-type:none” to the ul/ol styling: Here is an example:

You might also need to adjust margins for the items. To do this, add margin-left, margin-right, or simply margin to the li styling:

Example:

These instructions apply to ul, ol and li tags. If all goes well it should work just fine.

If you are still struggling with this issue, then contact me and I will try to offer some assistance.

Like this entry? Stay updated via RSS or Email. I hate spam so your email will never be shared!

 Print This Post