Do you need a list that doesn't have any indentation?

Hey there! I stumbled upon this code snippet and I'm trying to figure out how to remove the indent for version 2.1. The existing code works perfectly, but I really want to get rid of those indents. Any help would be awesome, thanks!

Here is the code:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;    
}

li li {
  
    margin:0;
   
}

li li:before {
    content: counters(item, ".") " ";
    margin:0;
}
<ol>
    <li>Lorem ipsum.</li>
    <li>Excepteur sint occaecat cupidatat non proident:
        <ol>
            <li>sunt in culpa qui officia,</li>
            <li>deserunt mollit anim id est laborum.</li>
        </ol>
    </li>
    <li>Ut enim ad minim veniam.
        <ol>
            <li>Quis nostrud exercitation.</li>
            <li>Ullamco laboris nisi ut.
                <ol>
                    <li>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</li>
</ol>

Answer №1

To resolve the issue, you should eliminate display: table and display:table-cell from your CSS.

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
    content: counters(item, ".") ". ";
    padding-right: 0.6em;    
}

li li {
    margin: 0;
}

li li:before {
    content: counters(item, ".") " ";
    margin:0;
}
<ol>
    <li>Lorem ipsum.</li>
    <li>Excepteur sint occaecat cupidatat non proident:
        <ol>
            <li>sunt in culpa qui officia,</li>
            <li>deserunt mollit anim id est laborum.</li>
        </ol>
    </li>
    <li>Ut enim ad minim veniam.
        <ol>
            <li>Quis nostrud exercitation.</li>
            <li>Ullamco laboris nisi ut.
                <ol>
                    <li>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserun...
</ol>

Answer №2

If you're aiming to maintain uniform text alignment, I came across a solution that involves setting a fixed width for the li:before element.

Take a look at the code snippet provided below:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table-row;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  content: counters(item, ".") ". ";
  display: inline-block;
  margin: 0;
  width: 40px;
}

li li {
  margin: 0;
}
<ol>
    <li>Lorem ipsum.</li>
    <li>Excepteur sint occaecat cupidatat non proident:
        <ol>
            <li>sunt in culpa qui officia,</li>
            <li>deserunt mollit anim id est laborum.</li>
        </ol>
    </li>
    <li>Ut enim ad minim veniam.
        <ol>
            <li>Quis nostrud exercitation.</li>
            <li>Ullamco laboris nisi ut.
                <ol>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</li>
</ol>

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

What is the reason behind TypeScript rejecting the syntax of checkbox input elements?

When trying to use the following checkbox in TypeScript, I encountered a warning: <input type="checkbox" onClick={(event: React.MouseEvent<HTMLInputElement>) => { setIsTOSAccepted(event.target.checked); }} defaultChecked={ ...

Tips for effectively using the parseInt function to access and verify a span element from inside a chrome extension

Trying to utilize parseInt to ascertain if a span element is greater than or equal to 1 within my Google Chrome Extension. Attempting to monitor this "0" for changes and trigger a specific URL upon change - Refer to the Image View of the "inspect" option ...

Ways to apply styles to the final element containing a specific class within a nested list using CSS

Styling the final HTML element with a specific css class presents challenges due to certain constraints that must be considered. In the website I'm currently working on, the navigation menu consists of multiple nested lists. When an element is clicke ...

Is there a way to display x squared as a superscript inside a button element?

In my reactjs project, I am developing a basic calculator. One of the buttons is supposed to calculate x squared, and I tried using the <sup> HTML element for this purpose but it did not work as expected. <Button name = "x<sup>2</sup> ...

Utilize Selenium in Python to choose an element

When working with the following HTML code: <div class="nav-category__col" id="category_nav_level_3" style="display: block;"> <input type="hidden" value="1" name="videogame_type" id="videogame_type"> <ul class="nav-category__list" adp ...

Safari does not support font-face rendering, unlike Chrome

I am in the process of creating a typewriter-style font page using a local font. I have used @font-face to import it, and while it displays correctly on Google Chrome, it does not render properly in Safari. You can view the web page here: (you will need ...

Javascript malfunctioning - exhausted all troubleshooting options

My JavaScript code consists of a single line, but I keep encountering the "getElementById null" error. document.getElementById("menu-background").style.left = "0"; HTML: <html> <head> <title></title> <link rel="style ...

Creating nested tables by assigning unique Div IDs to each table element

Can we utilize a straightforward JavaScript/jQuery function to nest elements inside table elements? For instance, every square comes with its own unique ID (A1, B7, C5). How can I use this ID to insert the checker image in any selected tile upon clicking? ...

Limit Range of jQuery UI Slider Button

How can I modify the jQuery UI slider range to keep the button within the slider div and prevent it from overlapping as shown in the screenshots below? https://i.sstatic.net/odG3o.png https://i.sstatic.net/aiGxr.png ...

Input automatically establishes default values

Something strange is happening with my HTML form. When I view it on a browser, default values are appearing in the text and password inputs that I did not set. The text input shows "creator" and the password input shows "*****". This only occurs when I set ...

Ways to Design ASP.NET Buttons for Users with Disabilities

Recently, I attempted to style an asp button using CSS. The Button HTML: <asp:Button ID="btnClockin" runat="server" Text="Clock In" class="FullWidthButton" /> Here is the CSS code: .FullWidthButton {width:100%;} Everything was working fine until ...

The dynamic addition of divs to the HTML body is causing them to overlap

Check out this functional plunker that is nearly complete. The current issue I am facing is with the chat divs being dynamically added to the body using $compile, but they all have the same CSS class and end up overlapping each other, like so: .chat-wind ...

_my_custom_styles.scss are being overridden by reboot.scss

Hey there, I'm currently facing an issue where my custom CSS is getting overwritten. Even though I have placed my custom CSS beneath the CDN bootstrap reference, it doesn't seem to resolve the problem. For instance, when attempting to change the ...

What is the best method for pulling specific tags from HTML in Android with Jsoup?

How can I use jsoup to extract the HTML tag (div id="content-body-14269002-17342313) from this specific link? Could someone kindly share a code snippet demonstrating how to accomplish this task? ...

Obtain JSON information and insert it into an HTML element

I'm currently faced with an issue regarding JSON data (fetching and posting it). Below is the code I have used, but unfortunately it is not working and I am unsure why. Upon checking with Firebug, it indicates the response as: 200 OK sourceforge.net 1 ...

How can I create a reverse animation using CSS?

Is there a way to reverse the animation of the circular notification in the code provided? I want the circle to move forward, covering up the info and fading out. I've tried switching the animation around but haven't had success. Any suggestions? ...

Is there a way to adjust the slide length in JQuery's slideUp function using pixels? It seems like

At the bottom of a page, I have a fixed position div element. There is another div below it, but it is hidden outside of the page margins. I am attempting to slide both divs upwards so that the bottom one becomes visible (moving out of the margin). However ...

What could be causing the malfunction of Bootstrap Multiselect functionality?

I have been attempting to set up Bootstrap Multiselect but it simply refuses to work. Despite trying various solutions, I am unable to pinpoint the issue. My index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

Use jQuery to switch the class of the designated DIV in the showcasing slider

Check out this jQuery slider example where I have two Divs - DIV ONE and DIV TWO. Can you help me figure out how to: 1) Automatically change the class of DIV ONE from "test" to "testc" when Slide 1 is displayed by the slider. 2) Automatically update DIV ...

Attempting to code in JavaScript results in the entire webpage disappearing

Every time I try to utilize document.write, the entire page disappears leaving only the advertisement visible. function __adthis(id) { $.getJSON('banner.php', function (data) { var adNum = Math.floor(Math.random() * data.ban.length); ...