ul、li 标签是HTML中常见的标签，比如导航栏，菜单栏其实都是用这两个标签实现的。而古老的tr、td标签已经不再适用了。就拿自己的友情链接来说，其实也是利用ul、li来实现分列显示的。原来 Forece 一直都是拿code直接过来用的，从来没有细研究到底CSS中是怎么实现表格样式的。今天剖析一下怎么利用ul、li标签做出两列样式。

HTML代码如下

1
2
3
4
5
6
7
8
9
10
<ul class="ft_about" style="list-style:none">
<li><a href="http://ivytigercapital.com/en/about-us/">About Us</a></li>
<li><a href="http://ivytigercapital.com/en/contact/">Contact Us</a></li>
<li><a href="http://ivytigercapital.com/en/team/">Team</a></li>
<li><a href="http://ivytigercapital.com/zh/category/%E6%8A%95%E8%B5%84%E6%8A%A5%E5%91%8A/">Report</a></li>
<li><a href="http://ivytigercapital.com/en/careers/">Careers</a></li>
<li><a href="http://ivytigercapital.com/en/terms-of-use/">Term of Use</a></li>
<li><a href="http://ivytigercapital.com/en/disclaimer/">Disclaimer</a></li>
<li><a href="http://ivytigercapital.com/en/privacy-policy/">Privacy</a></li>
</ul>

CSS代码如下

1
2
3
4
5
6
7
8
9
10
11
ul.ft_about{
        width:300px;
    list-style-type: none;
}
ul.ft_about li{
        width:100px;
        height:1px;
        float:left;
        padding:10px;
        margin:2px;
}

大家可以利用这个地址来做测试：
https://jsfiddle.net/

打赏分享