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

前端之家收集整理的这篇文章主要介绍了html-在没有表单元格的div中排列内容 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有两行链接,例如:

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怎么能做到呢?

最佳答案
<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;
}

猜你在找的HTML相关文章