博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用li列表模拟table式的表
阅读量:5786 次
发布时间:2019-06-18

本文共 1396 字,大约阅读时间需要 4 分钟。

今天我们看看如何通过li列表模拟表格,实现多列布局:
 
<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
> 

<
html 
xmlns
="http://www.w3.org/1999/xhtml"
> 

<
!
--xcf007 @ 2008-8-23--
> 

<
head
> 

<
meta 
http-equiv
="Content-Type" 
content
="text/html; charset=utf-8" 
/> 

<
title
>li模拟的表格
</title> 

<
style 
type
="text/css"
> 



margin:0; 

padding:0; 

font-family:'宋体'; 

font-size:12px; 

line-height:12px; 




color:#666; 

text-decoration:none; 


html 


overflow:auto; 


ul 


width:808px; 

margin:0 auto; 

background-color:#FFF; 


div{ text-decoration:none; } 

li{list-style:none;_display:inline-block;overflow:hidden;} 

li a{display:block; float:left;width:200px; line-height:20px;text-align:center;background-color:#F4E3D0;margin:1px;} 

li a:hover{text-decoration:underline;} 

</style> 

</head> 

<
body
> 

  
<
div
> 

    
<
ul
> 

      
<
li
>
<
a href=""
>222
</a>
<
a href=""
>3333
</a>
<
a href=""
>333
</a>
<
a href=""
>444
</a>
</li> 

      
<
li
>
<
a href=""
>3333
</a>
<
a href=""
>3333
</a>
<
a href=""
>6666
</a>
<
a href=""
>5555
</a>
</li> 

      
<
li
>
<
a href=""
>7777
</a>
<
a href=""
>3888
</a>
<
a href=""
>999
</a>
<
a href=""
>1000
</a>
</li> 

    
</ul> 

  
</div> 

</body> 

</html> 

 
 
结果如下:
 
只是个模拟布局,实际中应该根据情况使用table.
 
很多人有个误区,觉得使用table很丢人,实际是不对的,注意无"table 布局"并非无"table",不行你可以看看去,xhtml并没有摒弃table标签。
 
所以对于正常的表格显示还是要使用table.
本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/107717,如需转载请自行联系原作者
你可能感兴趣的文章
Python 学习笔记 - 面向对象(特殊成员)
查看>>
Kubernetes 1.11 手动安装并启用ipvs
查看>>
Puppet 配置管理工具安装
查看>>
Bug多,也别乱来,别被Bug主导了开发
查看>>
sed 替换基础使用
查看>>
高性能的MySQL(5)创建高性能的索引一B-Tree索引
查看>>
oracle备份与恢复--rman
查看>>
图片变形的抗锯齿处理方法
查看>>
Effective C++ Item 32 确保你的 public 继承模子里出来 is-a 关联
查看>>
phpstorm安装laravel-ide-helper实现自动完成、代码提示和跟踪
查看>>
python udp编程实例
查看>>
TortoiseSVN中图标的含义
查看>>
Tasks and Back stack 详解
查看>>
关于EXPORT_SYMBOL的作用浅析
查看>>
成功的背后!(给所有IT人)
查看>>
在SpringMVC利用MockMvc进行单元测试
查看>>
Nagios监控生产环境redis群集服务战
查看>>
Angular - -ngKeydown/ngKeypress/ngKeyup 键盘事件和鼠标事件
查看>>
Android BlueDroid(一):BlueDroid概述
查看>>
Java利用httpasyncclient进行异步HTTP请求
查看>>