Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to dispay unordered list inline with bullets?

Tags:

html

css

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.

like image 633
Joel Coehoorn Avatar asked Aug 29 '08 14:08

Joel Coehoorn


People also ask

How do I show an unordered list of items with a circle on a website?

To create unordered list in HTML, use the <ul> tag. The unordered list starts with the <ul> tag. The list item starts with the <li> tag and will be marked as disc, square, circle, etc. The default is bullets, which is small black circles.

How do I get bullets in unordered list?

We use the <ul> tag to create an unordered list. As usual, we need to use the <li> tags within <ul> and <ul/> to create the list items. The list items ( li ) inside the unordered list ( ul ) come with the default style of bullet points – so each of the list items is preceded by a black dot.

How do I make an inline unordered list?

If you want to make this navigational unordered list horizontal, you have basically two options: Make the list items inline instead of the default block. .li { display: inline; } This will not force breaks after the list items and they will line up horizontally as far as they are able.


1 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 &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.

like image 117
Joel Coehoorn Avatar answered Oct 17 '22 22:10

Joel Coehoorn