CSS布局中应用ul、li实现表格形式

开发 前端
本文向大家描述一下DIV CSS布局中如何应用ul、li实现表格形式,li是固定的宽度与高度(单元格),设置li在ul中浮动,当ul不够宽的时候,li就会自动另起一行排列。

你对DIV CSS布局中应用ul、li实现表格形式是否熟悉,表格类的数据,它有着得天独厚的条件,也非常方便组织,这类数据内容直接使用表格就可以了,希望本文的介绍能让你有所收获。

DIV CSS布局中应用ul、li实现表格形式

或许你认为你的数据并不是表格式的数据,还有着其它的用法或你自己的见解,我们也可以用。我们看下面的效果:

ul、li来实现表格形式的布局

  我们首先分析一下如何制作:li是固定的宽度与高度(单元格),设置li在ul中浮动,当ul不够宽的时候,li就会自动另起一行排列(一行有多少列通过计算即可得到ul的宽度,如一行四列,一列宽100px,那ul宽就是400px加上一定的边距)。这样就实现了类似于表格的效果,或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写:

引用:

<ulidulid="biaoge"> 
<liclassliclass="biaotou">第一列</li> 
<liclassliclass="biaotou">第二列</li> 
<liclassliclass="biaotou">第三列</li> 
<liclassliclass="biaotou">第四列</li> 
<li>数据1-1</li> 
<li>数据1-2</li> 
<li>数据1-3</li> 
<li>数据1-4</li> 
<li>数据2-1</li> 
<li>数据2-2</li> 
<li>数据2-3</li> 
<li>数据2-4</li> 
<li>数据3-1</li> 
<li>数据3-2</li> 
<li>数据3-3</li> 
<li>数据3-4</li> 
<li>数据4-1</li> 
<li>数据4-2</li> 
<li>数据4-3</li> 
<li>数据4-4</li> 
</ul> 
 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

   一个无序列表biaoge,前四个列表项我们赋予了类biaotou。因为这四个项是表格头部,应该与表格数据有所区别。所以单独赋予了类,可以方便控制。下面我们开始CSS代码的编写:

引用: 

*{  
margin:0;  
padding:0;  
font-size:12px;  
color:#000;  
}  
 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

  CSS整体布局声明,边距为零,填充为零,文字大小为12px,文字颜色为黑色#000;

引用: 

#biaoge{  
width:405px;  
margin:50pxauto;  
}  
 
    
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

ID为biaoge的ul的CSS编码,宽度为405px(一列100px*4列+li的边距),上下边距为50px,左右为自动,实现水平居中对齐。

引用: 

#biaogeli,#biaogeli.biaotou{  
list-style-type:none;  
width:100px;  
height:30px;  
line-height:30px;  
text-align:center;  
float:left;  
margin-left:1px;  
margin-bottom:1px;  
background:#ccc;  
}  
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

   对各个列表项li(即单元格)进行样式定义,设置列表项预设标记为无,宽度与高度分别是100px、30px,为了让文字垂直居中于li中,设置行高为30px,文字水平居中。设置为向左浮动,并且左边距与底边距均为1px,实现了简单的表格线的效果。(如果设计成border的表格线,很多CSSHACK很难控制与调整,特别是FF中极不正常,不建议使用border来实现这类ul+li实现表格线的定义!)设置背景色为浅灰色#ccc。

引用: 

#biaogeli.biaotou{  
background:#999;  
}  
  • 1.
  • 2.
  • 3.

   我们设置四个“表头”li的背景色为深灰色#999,与其它的li区别开来。我们的样式定义基本就完成了。你可以在色彩上对它进行一些其它的美化。

  最后我们再次声明,表格类的数据最好是用表格来实现,符合WEB标准不必拘泥于完全不用表格,只是在适当的情况下,可以使用此案例的方法来实现类似于表格的布局,点击这里查看最终效果。

【编辑推荐】

  1. DIV CSS表单布局五个小技巧使用秘笈
  2. 技术分享 如何实现CSS横向导航
  3. 术语汇编 基本CSS滤镜概述
  4. 完美实现丰富的CSS文字效果
  5. 鼠标经过时改变DIV背景颜色的三种途径
责任编辑:佚名 来源: fcgood.com
相关推荐

2010-08-26 11:01:00

ulliCSS

2023-10-30 09:18:28

CSSColumns布局

2010-08-23 15:22:56

CSSfloat

2010-09-14 17:07:26

DIV浮动定位CSS

2010-08-26 10:42:18

CSStr td

2010-09-14 16:57:29

DIV绝对定位CSS

2010-09-01 13:03:12

CSS规则

2010-09-09 13:12:54

CSSfloatDIV

2010-08-16 14:18:49

DIV+CSS

2010-09-02 14:17:56

CSS浮动

2010-09-08 12:49:16

CSS斜线

2010-09-03 14:00:29

CSSbackground

2022-05-26 00:06:19

CSSFirefoxElectron

2010-08-30 14:03:59

CSS

2017-10-10 15:52:17

前端FlexboxCSS Grid

2010-09-03 15:59:19

DIV CSS

2022-10-13 09:01:24

GridCSS二维布局

2010-09-02 13:53:58

CSS Sprites

2010-09-01 08:58:58

2010-09-09 15:17:01

absoluterelativeCSS
点赞
收藏

51CTO技术栈公众号