摆脱要点<ul></ul>

Question

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?

Answer 1

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:

• list-style-type at the Mozilla Developer Center .

Answer 2

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

Answer 3

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:

Answer 4

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.

Answer 5

Try this instead, tested on Chrome/Safari

ul {
 list-style: none;
}

Answer 6

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.

Answer 7

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;}

Answer 8

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;">

Answer 9

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

Answer 10

for inline style sheet try this code

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

Answer 11

In a chrome, you can use

ul {
 list-style: none;
}

Answer 12

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.

Answer 13

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

Answer 14

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