A lot of times I need to distribute nav-items or something in CSS, but the left and right items need to be flushed left and right and the space between all items needs to be evenly distributed.
Here are a few solutions I've come up with.
// JUSTIFIED LIST
.justified-list {
margin:0;
padding:0;
line-height:1;
list-style-type: none;
text-align: justify;
.jl-item { display: inline-block; }
&::after {
content: '';
display: inline-block;
width: 100%;
}
}
<ul class="justified-list">
<li class="jl-item"><a href="#">Item</a></li>
<li class="jl-item"><a href="#">Item</a></li>
<li class="jl-item"><a href="#">Item</a></li>
<li class="jl-item"><a href="#">Item</a></li>
</ul>
.even-list {
margin:0;
padding:0;
list-style-type: none;
display: table;
table-layout: fixed;
width: 100%;
.el-item {
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
<ul class="even-list">
<li class="el-item"><a href="#">Item</a></li>
<li class="el-item"><a href="#">Item</a></li>
<li class="el-item"><a href="#">Item</a></li>
<li class="el-item"><a href="#">Item</a></li>
</ul>
Glad this helped @h3lt3r-sk3lt3r! I forgot this Gist existed. When I wrote this, I didn't feel that flexbox had broad enough browser support. Back then I still had to QA for Internet Explorer and other legacy browsers.
Today I would just use flexbox, but it's nice to see that these solutions still work.