3

我有两行链接,例如:

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 来完成呢?

4

2 回答 2

3
<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;
}
于 2010-05-26T16:33:22.043 回答
0

只需使用样式设置 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 不应有任何其他填充或边距。否则布局会中断。

于 2017-05-30T19:35:19.450 回答