• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 290
  • Last Modified:

Remove bullets from li items

How do I remove the bullets from the list items of an unordered list?
Below is the code I'm using.

<!DOCTYPE html>
<html lang="en">
      <head>
            <meta charset="utf-8">
            <title>My Page</title>
    <style>
      li{
        line-style: none;
      color: red;
      }
    </style>
      </head>
      <body>
   
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>


      </body>


</html>
0
centem
Asked:
centem
3 Solutions
 
Robert SchuttSoftware EngineerCommented:
"list-style" works on ul, not li.
    <style>
      ul{
        list-style: none; /* not line-style */
      }
      li{
      color: red;
      }
    </style>

Open in new window

0
 
WebDevEMCommented:
Hi,

You are very close with what you have, with the one exception that LINE-STYLE should be LIST-STYLE.  Make that change, and your bullets will go away.  From there, you may want to adjust the padding-left on the UL itself.  Here's a modified version of your code:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My Page</title>
		<style>
			li {
				color: red;
			}
			ul {
				list-style: none;
				padding-left: 0px;
			}
		</style>
	</head>
	<body>

		<ul>
			<li>
				Item 1
			</li>
			<li>
				Item 2
			</li>
			<li>
				Item 3
			</li>
		</ul>

	</body>

</html>

Open in new window

0
 
WebDevEMCommented:
... and as Robert pointed out, "list-style" should be on the UL, not the LI.  Some browsers will accept it on the LI, but it's technically not correct.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
centemAuthor Commented:
Thanks for the response. But it does not work without the padding-left. Is this correct or does it work without it for you?
0
 
WebDevEMCommented:
Without the padding-left, the bullets should still be removed, but the whole list is still in the same position as if there were bullets.  Like this:

          Item 1
          Item 2
          Item 3


There's just a blank space to the left of the items.  Having the padding-left: 0px moves the whole list over so you just get what looks like

Item 1
Item 2
Item 3
0
 
Ray PaseurCommented:
One of the common problems we all deal with when styling documents is the inconsistency of the "standard" markup that different browsers use.  They all use different standards!  One solution to this is the use of a CSS Reset, that eliminates all of the potentially unwanted  positioning, just giving you an empty palette, so to speak.  Then you can decide what indentation you want, etc.  This page seems to have the collected wisdom:
http://www.cssreset.com/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now