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%;
}
}