Justify alignment at footer links

Simulate float left/right alignment and wrapping when content doesn't fit in the parent.

by otinanaipali

HTML

<div>
  <ul>
    <li>
      <a href="">Link 1</a>
    </li>
    <li>
      <a href="">Link 2</a>
    </li>
    <li>
      <a href="">Link 3</a>
    </li>
    <li>
      <a href="">Link 4</a>
    </li>

  </ul>
  <ul>
    <li>
      <a href="">Link 2.1</a>
    </li>
    <li>
      <a href="">Link 2.2</a>
    </li>
    <li>
      <a href="">Link 2.3</a>
    </li>
    <li>
      <a href="">Link 2.4</a>
    </li>
  </ul>
</div>

CSS

div {
  text-align: justify;
  background: #ccc;
  font-size: 0
}
div:after {
  content: "";
  display: inline-block;
  width: 100%;
}
div ul, span {
  display: inline-block;
  margin:0;
  padding:0;
}

li {
  display: inline-block;
  list-style: none;
  padding: 5px
}

li a {
  color: #000;
  font-size: 16px;
}