css text-outdent

Outdented list items are useful for lists of links where some links wrap. When the links are outdented visitors get a good indication of which lines are continuation lines and which lines are new links.

Use the css text-indent property with a negative number. Add the same amount of positive left padding or left margin to move the whole outdented paragraph or li to back to where it should be. The outdented items must be block level or have display: block; set.

Here is a sample ul:

Here is the css for the samples above:

.outdent li, .outdent p{
        padding-left: 1.5em;
        text-indent: -1.5em;
}
.outdent li{
        list-style: none;
        line-height: 1.3em;
        margin: 0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *