Aligning content in a div without table cells

Question

I have two lines of links like:

Link 1     Link 2     Link 3     Link 4
Link 5     Link 6     Link 7     LInk 8

I need four top links to align with the top bottom links regardless of the number of characters in the link. For instance,

This is link 1     This is link 2            Link 3     L4
LInk 1             Link 2 that is longer     Link 3     L4

I can do this with tables and td cells, but how can this be done only using divs?

Answer 1

<ul id="links">
  <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>

CSS

#links {
    list-style: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

#links li {
    width: 25%;
    margin: 5px 0px;
    padding: 0px;
    float: left;
}

Answer 2

Just by creating divs with display: inline-block;, you can get the alignment you need.

div {
  display: inline-block;
  width: 25%;
}

<div><a>This is link 1</a></div><div><a>This is link 2</a></div><div><a>Link 3</a></div><div><a>L4</a></div>
<div><a>LInk 1</a></div><div><a>Link 2 that is longer</a></div><div><a>Link 3</a></div><div><a>L4</a></div>

Run codeHide result

Note 1:

. . display: inline-block;. . div, :

margin: 0px -4px;

2:

Divs . .