How to make a HTML list appear without the bullets signs using CSS only?


Tags: html,css,html-lists

Problem :

I have an HTML list. The browser should see the list's existence and arrange the elements accordingly, however I don't want it to show a bullet next to each element. That is, a normal list appears like this:

  • text A
  • text B
  • text C

I want my list to appear like this:

text A
text B
text C



Solution :

ul { list-style: none; }

That gets rid of the bullet points. Now you can go ahead and assign styles to space them out like in your example, if that's what you really wanted:

li { padding: 5px 0; }

If you also don't want the list indented after removing the bullets, it will take another bit, like this:

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

If you dont set both margin and padding to 0, it will either look right in FF or IE, but not both


    CSS Howto..

    How to create a CSS Animation that is responding to horizontal mouse movement? [closed]

    How to create mirrored image effect with CSS single element

    HSS Liquid Layout Issue: how to fill the entire browser

    How to collapse div same like facebook chat

    How to control the behaviour of columns in a specific table using CSS

    How to remove space above and below the in-line block elements?

    How to properly position DIVS on a page to

    How to avoid CSS interference in an HTML page

    css how to make two div side by side

    How to change the color of an active h5 tab using jQuery or CSS

    How to create custom archive page on Tumblr

    How to stretch individual background images in CSS

    How can I get width and height of big image after displaying it on html-page?

    in a css three column setup using the float:left how do I horizontally centre an image inside each column

    How do I reduce the vertical space between list items in an unordered list?

    How to target last 3 elements in a container using CSS :nth-last-child(n)?

    Rotation of a div gives a black background on IE, how can I remove it?

    How to switch left and right in a css file?

    How to deal with image references in CSS in a Rails 3.1 app

    How to force Google's custom search to be responsive?

    How to apply CSS to 2x2 classes?

    When I hover left/right side of a div how do I display previous/next button (using CSS/jQuery)

    How to simulate nonstoparagraphing in HTML/CSS?

    How do I get these hover effects but with diamonds instead of circles

    How to hide first level span element by CSS “>” selector

    how to change the selecting background color

    How can I get a rounded rectangle graphic to span across all columns within an ASP.NET GridView header row?

    How to make an element with fixed position relative to its parent, not the whole screen?

    How to properly align something that resizes in a specific location

    jquery - how to change the display css attribute of a button within a li on hover