CODEWITHSUNDEEP
htmlhtml-lists
Sam Khan
Sam Khan

Reputation: 2477

Getting rid of bullet points from <ul>

I have the following list:

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

I want to get rid the bullets so i tried:

 ul#otis {
 list-style-type: none;
 }

That didn't work though. What is the proper way to remove the bullets from the displayed list?

Upvotes: 207

Views: 523071

Answers (14)

Franklin Correia
Franklin Correia

Reputation: 54

In a chrome, you can use

ul {
 list-style: none;
}

Upvotes: 4

Kishan
Kishan

Reputation: 1190

The following code

#menu li{
  list-style-type: none;
}
<ul id="menu">
    <li>Root node 1</li>
    <li>Root node 2</li>
</ul>

will produce this output:

output is

Upvotes: 26

pokumars
pokumars

Reputation: 161

This worked perfectly HTML

<ul id="top-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Process</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

CSS

#top-list{
  list-style-type: none;
  list-style: none;}

Upvotes: 4

Rokan Nashp
Rokan Nashp

Reputation: 351

To remove bullet from UL you can simply use list-style: none; or list-style-type: none; If still not works then i guess there is an issue of priority CSS. May be globally UL already defined. So best way add a class/ID to that particular UL and add your CSS there. Hope it will works.

Upvotes: 5

Philpot
Philpot

Reputation: 246

To remove bullet points from unordered lists , you can use:

list-style: none;

You can also use:

list-style-type: none;

Either works but the first is a shorter way to get the same result.

Upvotes: 22

Evan
Evan

Reputation: 21

your code:

ul#otis {
    list-style-type: none;
}

my suggestion:

#otis {
    list-style-type: none;

}

in css you need only use the #id not element#id. more helpful hints are provided here: w3schools

Upvotes: 1

Luke
Luke

Reputation: 87

for inline style sheet try this code

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>

Upvotes: 4

Ruskin
Ruskin

Reputation: 6161

I had an identical problem.

The solution was that the bullet was added via a background image, NOT via list-style-type. A quick 'background: none' and Bob's your uncle!

Upvotes: 0

Braden Best
Braden Best

Reputation: 8998

I had the same problem, and the way I ended up fixing it was like this:

ul, li{
    list-style:none;
    list-style-type:none;
}

Maybe it's a little extreme, but when I did that, it worked for me.

Hope this helped

Upvotes: 4

John Olav
John Olav

Reputation: 291

I had the same extreme irritating problem myself since the script did not take any notice of my styelsheet. So I wrote:

<ul style="list-style-type: none;">

That did not work. So, in addition, I wrote:

<li style="list-style-type: none;">

Voila! it worked!

Upvotes: 29

Stuff
Stuff

Reputation: 103

Put 

<style type="text/css">
 ul#otis {
     list-style-type: none;
   }
</style>

immediately before the list to test it out. Or

<ul style="list-style-type: none;">

Upvotes: 4

PeeHaa
PeeHaa

Reputation: 72652

There must be something else.

Because:

   ul#otis {
     list-style-type: none;
   }

should just work.

Perhaps there is some CSS rule which overwrites it.

Use your DOM inspector to find out.

Upvotes: 3

Paul Kaplan
Paul Kaplan

Reputation: 2885

Try this instead, tested on Chrome/Safari

ul {
 list-style: none;
}

Upvotes: 15

David Thomas
David Thomas

Reputation: 253308

Assuming that didn't work, you might want to combine the id-based selector with the li in order to apply the css to the li elements:

#otis li {
    list-style-type: none;
}

Reference:

Upvotes: 245

Related Questions