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/

htmlcsshtml-lists

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inconsistencies in Height Among JQuery Elements

I am encountering an issue with my datatable.js, where I am attempting to limit its height based on a specific row number, such as 4.5 rows. However, I am facing a problem with the row height (tr height). For example, when using the following method with m ...

javascripthtmljquerydatatables

Hiding the C3 tooltip after engaging with it

I'm currently expanding my knowledge on utilizing C3.js for creating charts, and one aspect I'm focusing on is enhancing the tooltip functionality. Typically, C3 tooltips only appear when you hover over data points as demonstrated in this example ...

javascriptcsschartstooltipc3.js

Discrepancies in button padding across desktop and mobile platforms

I have created a sample button and included a jsfiddle link to showcase the code. Due to the font properties of the specific font I'm using, I had to adjust the padding values differently for the top and bottom of the text to achieve a vertically cent ...

htmlcss

Update the JavaScript and CSS files following an AJAX request with $.get

I am encountering an issue where my global CSS and JS files contain all the necessary definitions, but when I load new HTML blocks via AJAX $.get, these new elements do not receive the correct CSS/JS definitions. Is there a convenient way to refresh the ...

javascriptjquerycssajax

Is the background image on my class website too large?

I am having an issue with the redbar.png image in my CSS. It is positioned too high (within #container) and overlapping with the horizontal nav bar when it shouldn't be. I'm uncertain how to fix this problem. Any suggestions would be greatly appr ...

htmlcssimage

Creating your own browser extension similar to Firebug: A comprehensive guide

As a beginner dotnet developer, I am looking to create an Internet Explorer addon similar to Firebug in Firefox. Specifically, I need the HTML and CSS features of Firebug without all the extras. I'm not sure where to start or which platform to choose. ...

htmlinternet-explorerfirebugadd-onieaddon

Achieving full white space utilization with inline block elements

When attempting to stack elements on top of each other, I encounter unwanted white space due to varying heights of the elements. I am trying to figure out how to move boxes 6 and 7 up while keeping all corresponding elements beneath them aligned properly. ...

htmlcssflexboxdisplay

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable

Interactive website powered by a dynamic database system and featuring HTML pages

I am currently working on a project involving a cutting-edge dynamic database driven website where users can engage by posting, commenting, liking, and more. I have been contemplating the idea of using HTML pages instead of PHP pages. Essentially, wh ...

phphtmlajaxdynamic

What are the reasons and methods for storing multiple images within a single image?

Lately, I've observed a trend where websites are consolidating multiple images into one large image, similar to Google's homepage. Although we see many small images on the left side, it is actually just one single image: I am curious about how ...

htmlimage

Automatically adjust sizes with div elements

How can I automatically resize this iframe within a div? My current method is not effective. <iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf" width="600" height="400" frameborder="0" margin ...

csshtml

Guide on replacing the character "&" in PHP with ease

I am encountering an issue where some output on the page contains a space character written as "&nbsp;". I need to replace it back with a regular space. I attempted using str_replace("&nbsp"," ",$mystr) and even preg_replace("/(&nbsp;)/", " ", ...

phphtmlregex

What is the best way to incorporate multiple countdown timers on a single HTML page?

I am in the process of developing an online auction site and I need to include the end time and date for each auction. To achieve this, I have created a countdown.js file with the following code: // set the date we're counting down to var target_dat ...

javascripthtmlcountdowntimer

Dealing with unreadable strings when formatting dates in a JSP

When working on a JSP project, I encountered a situation where I needed to format a Java Date retrieved from the request. My current approach looks like this: <fmt:formatDate value="${attribute.value}" pattern="yyyy-MM-dd HH:mm:ss"/> This method wo ...

javahtmljspjstl

Steps for deactivating a button until the form has been submitted

Click here for the Fiddle and code sample: $(".addtowatchlistform").submit(function(e) { var data = $(this).serialize(); var url = $(this).attr("action"); var form = $(this); // Additional line $.post(url, data, function(data) { try { ...

javascriptjqueryhtmlajaxforms

Different option for animated side slider based on location

Whenever I click on this div, it slides out smoothly. Check out these images to get a visual of what I am aiming for: This is how the Div looks when collapsed by default https://i.stack.imgur.com/zJIsA.png Once slid out, the Div looks like this (highlig ...

javascriptjqueryhtmlcss

Utilize Bootstrap to position the button right next to the input field

I am having trouble aligning the button on the right next to the email textbox. Unfortunately, my attempts have not been successful. Fiddler: https://jsfiddle.net/Vimalan/mt30tfpv/4/ <div class="col-xs-3"> <div class="fo ...

htmlcsstwitter-bootstrap

Challenges with Media Queries post Integration of MUI Library in React

I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...

javascriptcssreactjsmaterial-ui

Using Bootstrap columns within a PHP while loop

Encountering an issue and the code in question is shown below: <div class="col-md-4 text-center animate-box"> <a href="work-single.html" class="work" style="background-image: url(images/portfolio-2.jpg);"> ...

phpcsstwitter-bootstrapbootstrap-4

Navigate the child div while scrolling within the parent div

Is there a way to make the child div scroll until the end before allowing the page to continue scrolling when the user scrolls on the parent div? I attempted to use reverse logic Scrolling in child div ( fixed ) should scroll parent div Unfortunately, it ...

javascriptjqueryhtmlcssscroll