html - テーブル セルのない div 内のコンテンツの整列

Question

次のような2行のリンクがあります。

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

リンク内の文字数に関係なく、上部の 4 つのリンクを上下のリンクに揃える必要があります。例えば、

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

テーブルと td セルでこれを行うことができますが、div を使用するだけでこれをどのように達成できますか?

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