How to dispay unordered list inline with bullets?

Joel_Coehoorn_3043 0
Viewed 81977

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.

css html
13 Answers

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.

Joel_Coehoorn_30430

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.

Peter_Hilton_26700

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;
}
Chris_Marasti-Georg_960

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.

user_6190

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.

user_31930

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.

user_29940840

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;
}
Erik_van_Brakel_9090

You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:

ul {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

user_36191920

Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:

ul {
    display: flex;
    flex-wrap: wrap;
}

li {
    margin-right: 24px;
}
user_12762880
Related