How to Eliminate Unwanted Indentation in Wrapped Unordered Lists with CSS?

Removing Unordered List Indentation with CSS

When text in an unordered list wraps around, unwanted indents may appear. To address this issue, try the following steps:

1. Remove Indentation

Delete the default padding and list-style indent:

ul {
    padding: 0;
    list-style-type: none;  
}

2. Decrease Line-Height

If necessary, reduce the line-height by setting it equal to the font size, or slightly less:

ul li {
    line-height: 1em;
}

3. Disable Float

Remove any float properties applied to list items, ensuring they display inline-block instead:

ul li {
    float: none;
    display: inline-block;
}

4. Adjust Font Size

As a final step, adjust the font size to your desired appearance.

Example

Consider the following code:

<div>
<pre class="brush:php;toolbar:false">#info {
    ...
}

#info ul {
    padding: 0;
    list-style-type: none;
}

#info ul li {
    float: none;
    display: inline-block;
    line-height: 1em;
}

This combination of techniques should eliminate the indentation from wrapped lines in unordered lists, ensuring a clean and professional appearance.