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

我可以用table和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

只需使用display: inline-block;设置div，您就可以获得所需的对齐方式。

＆＃13;

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

＆＃13;

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

＆＃13;

注1：

一行的div之间没有空格。那是故意的。这是display: inline-block;的怪癖。添加空格会制动布局。如果你必须在div之间有空格，那么通常的解决方案是应用负余量：

margin: 0px -4px;

注2：

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

在没有表格单元格的情况下排除div中的内容

2 个答案:

注1：

注2：