用 ul， li 标签和CSS做出表格样式

Forece

10 年前

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/

打赏赞