What is the best way to ensure the alignment of list content and numbering remains separate in HTML while using list-style-position set to inside?

Question

What is the best way to ensure the alignment of list content and numbering remains separate in HTML while using list-style-position set to inside?

Below is a list with customized styling:

ol {
  background: #ff9999;
  padding: 20px;
  list-style-position: inside;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
}

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

I am facing an issue where the text in each list item wraps and aligns with the number, rather than remaining left-aligned independently. I want the text to be aligned within itself and not with the number. How can I achieve this?

Here is a screenshot illustrating the problem: https://i.sstatic.net/lx0UR.png

javascript html css stylesheet

Answer 1

Answer №1

Here is the solution:

ol {
  background: #ff9999;
  counter-reset: foo;
  display: table;
  padding: 20px;
}

ol>li {
  background: #ffe5e5;
  counter-increment: foo;
  display: table-row;
}

ol>li::before {
  content: counter(foo) ". ";
  display: table-cell;
  text-align: left; /* adjust for number alignment right/left. */
  padding-right:5px; /* Increase for space between number and text.*/
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis facilis mollitia delectus nostrum illum. Ratione a autem, officiis ipsum tempore non ab consectetur illum commodi vitae quas. Beatae sit qui, officia sapiente debitis neque veniam deleniti
    amet officiis minus ipsam doloremque dignissimos aliquid commodi sequi, nulla ullam molestias voluptate natus.</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

Answer 2

Here is the solution:

ol {
  background: #ff9999;
  counter-reset: foo;
  display: table;
  padding: 20px;
}

ol>li {
  background: #ffe5e5;
  counter-increment: foo;
  display: table-row;
}

ol>li::before {
  content: counter(foo) ". ";
  display: table-cell;
  text-align: left; /* adjust for number alignment right/left. */
  padding-right:5px; /* Increase for space between number and text.*/
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis facilis mollitia delectus nostrum illum. Ratione a autem, officiis ipsum tempore non ab consectetur illum commodi vitae quas. Beatae sit qui, officia sapiente debitis neque veniam deleniti
    amet officiis minus ipsam doloremque dignissimos aliquid commodi sequi, nulla ullam molestias voluptate natus.</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

Answer 3

Answer №2

This CSS code snippet will ensure proper styling:

ol {
    border: solid 20px #ff9999;
    background: #ffe5e5;
    padding: 10px;
    list-style: none;
    counter-reset: count;
}

ol li {
    padding: 5px;
    counter-increment: section;
    display: flex;
}

ol li:before {
    content: counter(section) ".";
    min-width: 30px;
}

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis facilis mollitia delectus nostrum illum. Ratione a autem, officiis ipsum tempore non ab consectetur illum commodi vitae quas. Beatae sit qui, officia sapiente debitis neque veniam deleniti amet officiis minus ipsam doloremque dignissimos aliquid commodi sequi, nulla ullam molestias voluptate natus.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Libero, facere ex voluptatem aspernatur!</li>
    <li>Quis magnam, voluptates error sunt.</li>
    <li>Nesciunt dolor, deleniti repudiandae iusto?</li>
    <li>Dolorem ea alias, sapiente hic!</li>
    <li>Rem sit, error ex? Maxime.</li>
    <li>Itaque commodi odit maxime pariatur.</li>
    <li>Aliquid odio cum vitae animi!</li>
    <li>Ipsa, ex! Ullam, ipsa, laboriosam?</li>
    <li>Culpa nemo illum, deleniti itaque.</li>
    <li>Velit similique incidunt placeat ducimus!</li>
    <li>Sit vel perspiciatis, voluptas itaque.</li>
</ol>

Answer 4

This CSS code snippet will ensure proper styling:

ol {
    border: solid 20px #ff9999;
    background: #ffe5e5;
    padding: 10px;
    list-style: none;
    counter-reset: count;
}

ol li {
    padding: 5px;
    counter-increment: section;
    display: flex;
}

ol li:before {
    content: counter(section) ".";
    min-width: 30px;
}

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis facilis mollitia delectus nostrum illum. Ratione a autem, officiis ipsum tempore non ab consectetur illum commodi vitae quas. Beatae sit qui, officia sapiente debitis neque veniam deleniti amet officiis minus ipsam doloremque dignissimos aliquid commodi sequi, nulla ullam molestias voluptate natus.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Libero, facere ex voluptatem aspernatur!</li>
    <li>Quis magnam, voluptates error sunt.</li>
    <li>Nesciunt dolor, deleniti repudiandae iusto?</li>
    <li>Dolorem ea alias, sapiente hic!</li>
    <li>Rem sit, error ex? Maxime.</li>
    <li>Itaque commodi odit maxime pariatur.</li>
    <li>Aliquid odio cum vitae animi!</li>
    <li>Ipsa, ex! Ullam, ipsa, laboriosam?</li>
    <li>Culpa nemo illum, deleniti itaque.</li>
    <li>Velit similique incidunt placeat ducimus!</li>
    <li>Sit vel perspiciatis, voluptas itaque.</li>
</ol>

What is the best way to ensure the alignment of list content and numbering remains separate in HTML while using list-style-position set to inside?

Answer №1

Answer №2

Similar questions

PHP: Dynamically update div content upon submission

Troubleshooting Issue: Failure of Ajax Script to Display Saved Data in Edit Function

Reverse the impact of the preceding CSS directive

Update the key names in an array of objects using the value from the first element of the array

Validating minimum and maximum values with Angular 2 FormBuilder

What is the best way to determine the total number of classes that come before a specific element

Please proceed with submitting your choices in the order that you have selected

Generating HTML elements on the server-side vs. retrieving data as JSON and dynamically creating elements using JavaScript

Uploading a file using AngularJs

When the onLeave event of fullPage.js is activated

What is the method for converting this pattern into a JavaScript regex?

Is it possible to utilize :not in this scenario?

When `rxjs` repeat and async pipe are applied and then removed from the DOM, the resulting value becomes null

The dropdown menu component in ReactJS is malfunctioning

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Setting up Node.js

Find all elements with the same class and identify the first element among them using jQuery

Issue encountered when compiling a node.js file on Windows 10, resulting in error code 800A03EA

sending parameters to a callback function that is listening for arguments

Initiate a jQuery modal dialogue box