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:
- some link to somewhere…
- some link to somewhere far far away, over the hill and through the valley, in another land where raspberries grow on bushes, not on trees
- some link to my cousin’s business selling grasshoppers to unsuspecting tourists in Ithaca, NY. He sets one foot after the other, stepping like a tight rope walker
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;
}