How to dispay unordered list inline with bullets?

StackOverflow https://stackoverflow.com/questions/34399

  •  09-06-2019
  •  | 
  •  

Question

I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.

Was it helpful?

Solution

The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.

What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.

edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.

OTHER TIPS

I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:

ul.tabs li {
  list-style: none;
  float: left;
}
ul.tabs li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

I'm using a square bullet here, but a normal bullet \2022 would work the same.

You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.

li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}

The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.

It's actually a very simple fix. Add the following to the ul:

display:list-item;

Adding this CSS line will add the bullet points.

Keep them display blocked, give them a width and float left.

That will make them sit by side, which is like inline, and should maintain the list style.

Did you try float: left on your <li/>? Something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        ul li {
            float: left;
            margin-left: 2em;
        }
    </style>
</head>
<body>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</body>
</html>

I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.

addition: Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.

One way to fix that is to add the following to your styles:

ul {
    overflow: auto;
    background: #f0f;
}

I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.

All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...

HTML:

<div class="block-list">
  <ul>
    <li><ul><li>a</li></ul></li>
    <li><ul><li>b</li></ul></li>
    <li><ul><li>c</li></ul></li>
  </ul>
</div>

CSS:

.block-list > ul > li { display: inline; float: left; }

IE7 Page:

    o a o b o c

...it is a dumb solution, but it seems to work.

You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>

In HTML, I added a break after each li like this:

<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>

And CSS:

li { float:left; }

You can use following code

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top