Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a HTML list appear without the bullets signs using CSS only?

I have an HTML list. The browser should see the list's existence and arrange the elements accordingly, however I don't want it to show a bullet next to each element. That is, a normal list appears like this:

  • text A
  • text B
  • text C

I want my list to appear like this:

text A
text B
text C

like image 228
M. A. Kishawy Avatar asked Jan 26 '10 13:01

M. A. Kishawy


1 Answers

ul { list-style: none; }

That gets rid of the bullet points. Now you can go ahead and assign styles to space them out like in your example, if that's what you really wanted:

li { padding: 5px 0; }

If you also don't want the list indented after removing the bullets, it will take another bit, like this:

ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

If you dont set both margin and padding to 0, it will either look right in FF or IE, but not both

like image 196
Erik Avatar answered Sep 17 '22 16:09

Erik