Remove bullet points


#1

Hi Everyone,

I'm on HTML and CSS: Part I, page: 9/14 under the title 9.Margin IV.

I'm trying to remove the bullet points from the menu list on the top of the page with the following:

list-item: none;

The whole snippet looks like this (actually there is a Hint where it suggests to remove the bullet points):

li {
font-weight: 100;
letter-spacing: 2px;
margin-left: 20px;
margin-right: 20px;
padding: 20px 0px;
text-transform: uppercase;
list-item: none;
}

and this list-item: none; doesn't seem to do anything to the page. Why?

Thanks for your help.


#2

I believe list-item: none; works when it is under the ul selector rather than the li selector.

ul {
    list-item: none;
}

#3

Thanks for your quick reply.

Tried your suggestion and can't get it to work. I tried the following:

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

When this didn't work I tried your syntax and created a new line:

ul {
list-item: none;
}

(Interestingly the word "list-item" remains white in the declaration as opposed to the rest of the properties, which are pale blue in the code editor.)

Still don't know what to do.


#4

Hmm....to be honest, I never knew about list-item until you mentioned it. Usually, it's list-style or list-style-type.

I have another way to remove bullet points by playing around with things:

ul {
    list-style-type: none; /* Not sure if necessary but just for good measure...*/
    padding: 0;
}

The first one makes the points invisible but they are still there.
The padding just shift the items so that it doesn't look like you have invisible bullet points.


#5

I used list-style-type and it worked great, bullet points are gone:

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

The only reason I used list-item is because it was in "Hint" :slight_smile:

Thanks again.


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.