Nested list columns
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| ul { | |
| list-style-type: none; /* no bullets */ | |
| padding-left: 0; /* no spacing on left */ | |
| } | |
| li { | |
| clear: both; /* start a new line, kinda */ | |
| border-top: 1px solid #ccc; /* just for show */ | |
| } | |
| li header { | |
| float: left; | |
| width: 50%; | |
| } | |
| li ul { | |
| float: right; | |
| width: 50%; | |
| } | |
| </style> | |
| <ul> | |
| <li> | |
| <header>Milky Way</header> | |
| <ul> | |
| <li> | |
| <header>Sun</header> | |
| <ul> | |
| <li>Mercury</li> | |
| <li>Venus</li> | |
| <li>Earth</li> | |
| <li>Mars</li> | |
| <li>Jupiter</li> | |
| <li>Saturn</li> | |
| <li>Uranus</li> | |
| <li>Nepture</li> | |
| </ul> | |
| </li> | |
| <li>Alpha Centauri</li> | |
| </ul> | |
| </li> | |
| <li> | |
| <header>Andromeda</header> | |
| <ul> | |
| <li>N1/S1 arm</li> | |
| <li>N2/S2 arm</li> | |
| <li>N3/S3 arm</li> | |
| <li>N4/S4 arm</li> | |
| <li>N5/S5 arm</li> | |
| <li>N6/S6 arm</li> | |
| <li>N7/S7 arm</li> | |
| </ul> | |
| </li> | |
| </ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment