CSS: justify list items horizontally

justify-list-items.scss

ul.nav {
	-ms-text-justify: distribute-all-lines;
	overflow: hidden;
	text-align: justify;
	text-justify: distribute-all-lines;

	li {
		@include inline-block();
	}

	// this :after is sort-of a hack to justify the li in .nav
	// > short explanation: 
	//   the li are 'inline-block' and can therefore be justified via 'justify'.
	//   but: justification happens for every *line* except the last one, which is left-aligned.
	//   hence the need to have an additional line, which is provided by :after.
	//   it takes up a whole line (width: 100%) and is invisible due to it's font-size and line-height of 0
	// source: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs
	&:after {
		@include inline-block();
		content: '';
		font-size: 0;
		line-height: 0;
		width: 100%;
	}

}