Align Lists Flush Left
It’s surprisingly difficult to left align lists. Most, if not all browsers indent them by default. There are, however, obvious reasons for aligning lists with the surrounding text.
Here are the four options I’ve found for aligning lists:
- Set the left margin and padding to zero.
Text lines up, but bullets and numbers overflow to the left. It isn’t practical for every layout, and on a personal note I find it looks tacky.
- Find the left margin value where lists visually align with surrounding text.
It’s not precise. Each browser has a different bullet size, and number length is variable.
- Set bullets inside, add a left margin and use a negative indent to pull the first line back.
This works really well for bulleted lists, but not for numbered lists. A List Apart shows an example in the article Taming Lists.
- Add bullets and numbers in a pseudo element displayed as a table-cell.
Lately I’ve been working with HTML and CSS tables which inspired this technique, or maybe it’s simply a hack. Regardless, it seems to work well and scales nicely with em units. Keep reading to learn how it works…
Left Align Bulleted Lists
The basic idea is to wrap each bullet in a table-cell using a pseudo element. Support is good across browsers including IE8+.
If you use lists for navigation or whatnot, then I recommend replacing
ul above with a class to avoid resetting CSS for other lists.
Left Align Numbered Lists
Ordered lists are tricky because the width changes depending on how many digits are present. The default UA padding is pixel based in most browsers, so long numbers will eventually overflow.
The example below will left align numbers with surrounding paragraph text, and allows for any number length. This works because cells in a column inherit the largest cell width. So, the longest number will determine the column width.
content: counter(table-ol) "."
text-align:right because I like the numbers aligned on their right side when double or triple digits are introduced. If you prefer the numbers be flush regardless of how many digits, you can remove
I typically add margin below list items to separate things a bit, but margin can’t be applied to table rows and cells. In the demo below I define the margin for each
This comparison shows a list with no styling on the left, and the pseudo table-cell on the right. View the Sass and grab the code, or checkout the full page demo.
I’m not sure if I’d call this a technique, a trick or a hack, but interesting nonetheless and works quite nicely for aligning numbered lists. And while it works for bullets too, I might recommend the negative indent trick for unordered lists.