CODEWITHSUNDEEP
htmlcsshtml-lists
M. A. Kishawy
M. A. Kishawy

Reputation: 5079

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

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

Upvotes: 12

Views: 36611

Answers (5)

Kyad
Kyad

Reputation: 129

<ul style="list-style-type:none"></u>

By setting the style type to none the bullets will not show.

Upvotes: 0

BalusC
BalusC

Reputation: 1109625

Alternatively, you can also use a definition list (dl, dt, dd) without definition terms (dt elements).

<dl>
    <dd>text A</dd>
    <dd>text B</dd>
    <dd>text C</dd>
</dl>

But semantically I think an unordered list (ul, li) suits your particular purpose better :) So go ahead with just a piece of good CSS as explained by Erik.

Upvotes: 3

Grumpy
Grumpy

Reputation: 2253

list-style-type: upper-roman;

Upvotes: -1

Doug T.
Doug T.

Reputation: 65649

Use

list-style:none;

in the style for the < ul > tag

Upvotes: 3

Erik
Erik

Reputation: 20722

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

Upvotes: 21

Related Questions