Using display: table-cell to evenly determine widths. You can add an arbitrary number of <li>

dabblet.css

/**
 * Using display: table-cell to evenly determine widths. You can add an arbitrary number of <li>
 */


ul {
	padding: 0;
	display: table;
	width: 100%;
	background: hotpink;
	table-layout: fixed;
	border-spacing: 1em;
}
li {
	display: table-cell;
}
a {
	display: block;
	padding: 1em;
	text-align: center;
	background: white;
}
a:hover {
	background: lime;
}

dabblet.html

<ul>
<li><a href="http://google.com">Item</a></li>
<li><a href="http://google.com">Item</a></li>
<li><a href="http://google.com">Item</a></li>
<li><a href="http://google.com">Item</a></li>
<li><a href="http://google.com">Item</a></li>
<li><a href="http://google.com">Item</a></li>
</ul>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}