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