Skip to content

Instantly share code, notes, and snippets.

@tophtucker

tophtucker/index.html

Last active Aug 29, 2015
Embed
What would you like to do?
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