CODEWITHSUNDEEP
htmlcsscss-counter
Sebastian
Sebastian

Reputation: 141

Unordered List with numbers instead of bullet points

I have a Terms and Conditions file that I need to get on the webiste. However there are a lot of clauses and points such as 2, 2.1, 2.1.1 etc.

I thought I could do an unordered list and use css to get rid of the bullet points. I realize it may seem a bit long-winded but I am no HTML expert and I am also not sure how to go about it.

Upvotes: 0

Views: 7032

Answers (4)

Mike
Mike

Reputation: 4091

Try using counters.

ol {
  counter-reset: item;
}
li {
  display: block;
}
li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
}
<ol>
  <li>test</li>
  <li>test</li>
  <ol>
    <li>testing</li>
    <li>testing</li>
  </ol>
</ol>

This will produce:

  1. test

  2. test

    2.1. testing

    2.2. testing

Read more here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

Upvotes: 4

Fadi Obaji
Fadi Obaji

Reputation: 1494

You can use ol

Like this:

<ol>
  <li>Hello 
   <ol>
    <li>Hello 1</li>
    <li>Hello 2</li>
    <li>Hello 3</li>
   </ol>
  </li>
  <li>hi</li>
  <li>hey</li>
</ol>

Output:

enter image description here

Hope that helps :)

Upvotes: 2

Gravinco
Gravinco

Reputation: 687

You can use CSS to change/remove the bullets but if you want to use numbers you will have to use an Ordered List.

To remove the bullets just use this line in CSS:

list-style-type:none

Upvotes: 0

stackoverfloweth
stackoverfloweth

Reputation: 6907

have you tried an ordered list? 

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

http://www.w3schools.com/tags/tag_ol.asp

Upvotes: 0

Related Questions