html - 在没有表格单元格的 div 中排列内容

Question

我有两行链接，例如：

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

无论链接中有多少字符，我都需要前四个链接与顶部底部链接对齐。例如，

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

Answer 2

只需使用样式设置 divdisplay: inline-block;即可获得所需的对齐方式。

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>

注1：

一行的 div 之间没有空格。那是故意的。这是一个怪癖display: inline-block;。添加空格会破坏布局。如果您必须在 div 之间留有空格，那么通常的解决方案是应用负边距：

margin: 0px -4px;

笔记2：

div 不应有任何其他填充或边距。否则布局会中断。