An ordered list placed within a div container in an HTML document

Question

An ordered list placed within a div container in an HTML document

When I tried to format the ordered list with sub-items, I encountered an issue. There is a nested <ol> inside a <div>, but the numbering seems to be incorrect. Can you help me understand why?

OL {
  counter-reset: item;
  padding-left: 10px;
}

LI {
  display: list-item
}

LI:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
    </ol>
  </li>
</ol>

<hr />
<div>
  <ol>
    <li>one
      <ol>
        <li>one.one</li>
      </ol>
    </li>
  </ol>
</div>

To view and assess the code, please visit: http://jsfiddle.net/PTbGc/1265/

html css html-lists

Answer 1

Answer №1

If you want to achieve this, you can utilize a separate div tag. Take a look at the code snippets below:

OL {
  counter-reset: item;
  padding-left: 10px;
}

LI {
  display: list-item
}

LI:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

    <div>
    <ol>
      <li>one</li>
      <li>two
        <ol>
          <li>two.one</li>
        </ol>
      </li>
    </ol>
    </div>


    <hr />
    <div>
      <ol>
        <li>one
          <ol>
            <li>one.one</li>
          </ol>
        </li>
      </ol>
    </div>

Answer 2

If you want to achieve this, you can utilize a separate div tag. Take a look at the code snippets below:

OL {
  counter-reset: item;
  padding-left: 10px;
}

LI {
  display: list-item
}

LI:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

    <div>
    <ol>
      <li>one</li>
      <li>two
        <ol>
          <li>two.one</li>
        </ol>
      </li>
    </ol>
    </div>


    <hr />
    <div>
      <ol>
        <li>one
          <ol>
            <li>one.one</li>
          </ol>
        </li>
      </ol>
    </div>

Answer 3

Answer №2

You have the option to utilize individual div containers

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

 <div>
<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>
 <div>

Answer 4

You have the option to utilize individual div containers

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

 <div>
<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>
 <div>

An ordered list placed within a div container in an HTML document

Answer №1

Answer №2

Similar questions

Adjusting iframe height based on its source URL using JQuery

Discovering the block's height with the power of Jquery

After a link is clicked in the Rails web app, the style undergoes a subtle transformation

I utilized the `<script src="sample.pdf"></script>` tag in my HTML code and surprisingly, the JavaScript within the PDF document was still able to execute

Exploring anchor hover effects and navigating adjacent sibling elements

Scale first, then drag and drop to fix a faulty registration

Integrating individual script into HTML

What is the reason that columns do not float in Bootstrap when there are no rows?

Ensuring Navigation Elements Remain Aligned in a Single Line

Android mobile browser lacks visibility of certain elements

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

Delegating events with .on('click') and using the CSS negation selector :not()

Unable to invoke the jQuery function within CakePHP3

I am seeking guidance on extracting specific data from a JSON file and presenting it in an HTML table using jQuery

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

AngularJS integration with Bootstrap Confirmation jQuery plugin

Connect a responsive div to a main div

Struggling to designate the active button on an HTML/CSS webpage

Subscribe on Footer triggers automatic scrolling to the bottom of the page

Looking to Identify a Click Within a Complicated Component and Retrieve the Component's ID