Simple Justified Inline Menu

by Cam Gould

HTML

<ul class="justify">
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Shop</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Help</a></li>
</ul>

CSS

* {
  font-family: sans-serif;
  padding: 0; margin: 0;
}
.justify {
  text-align: justify;
}
.justify:before{
  content: '';
  display: block;
  width: 100%;
}
.justify:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.justify li {
  display: inline-block;
  position: relative;
  list-style: none;
  border: 1px dashed #555;
  padding: 20px 40px;
  margin: 5px;
}
.justify li a {
  color: #555;
  text-decoration: none;
}