Home

CSS Examples Markerless and “no indent” Lists

Date: 09/27/2004 Markerless and “no indent” Lists

Author: CSS Drive

Removing the default marker that appear to the left of lists is useful when you wish to use lists purely for semantic reasons or to fully customize visually. The below CSS removes both the marker and changes the indentation of the list so it's inline with normal content. The combination of "padding: 0" and "margin-left: 0" ensures the indentation is consistent across browsers.

  • News
  • Sports
  • Technology
  • Webmaster

The HTML:

<ul>
<li>News</li>
<li>Sports</li>
<li>Technology</li>
<li>Webmaster</li>
</ul>

The CSS:

ul{
list-style-type: none;
padding: 0;
margin-left: 0;
font-weight: bold;
}

Comments (5)

gdfg

#1: fdgfd on 01/26 at 12:35 PM

gfdgfdg

#2: fdgfd on 01/26 at 12:35 PM

doesn't work on me. the bullets are gone yet the whole list is still indented. I've tried to use this:

li{ list-style-type: none; padding: 0; margin-left: -25px;}

well, i'm still searching for the best solution on this. im planning to have it hovered.

li a:hover { }

i'll post on this soon..

#3: Richard Badlisan on 02/19 at 01:41 AM

Hey Richard use this code:

ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
It works for me now. If used the same code as presented in this site it did not work because my list wasn't inside a DIV.

Regards.

#4: Luis Correia on 03/25 at 06:47 PM

Ooops the DIV I mentioned has nothing to do with the list indent.

#5: Luis Correia on 03/25 at 06:56 PM

NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top