CODEWITHSUNDEEP
htmlcss
Joel Coehoorn
Joel Coehoorn

Reputation: 415600

How to dispay unordered list inline with bullets?

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.

Upvotes: 55

Views: 88009

Answers (13)

Leon
Leon

Reputation: 717

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>

Upvotes: 1

MazeChaZer
MazeChaZer

Reputation: 1298

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

Upvotes: 0

YeRe415
YeRe415

Reputation: 23

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

Upvotes: 0

Peter Hilton
Peter Hilton

Reputation: 17344

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.

Upvotes: 26

Chris Marasti-Georg
Chris Marasti-Georg

Reputation: 34640

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

Upvotes: 9

AenAllAin
AenAllAin

Reputation: 29

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.

Upvotes: 1

Joel Coehoorn
Joel Coehoorn

Reputation: 415600

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 &bull; 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.

Upvotes: 41

kristjan reinhold
kristjan reinhold

Reputation: 2048

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>

Upvotes: 0

L.Jordens
L.Jordens

Reputation: 47

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.

Upvotes: 3

user2194160
user2194160

Reputation: 1

You can use following code

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

Upvotes: -1

Erik van Brakel
Erik van Brakel

Reputation: 23800

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

Upvotes: 1

Chris James
Chris James

Reputation: 11701

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.

Upvotes: 3

Neall
Neall

Reputation: 27114

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.

Upvotes: 4

Related Questions