有时需要给 span 或 label 标签定义长度,例如用 span 或 label 定义表格,为了使各列对齐,就需定义每一列的长度;此时,你会发现无论怎么定义长度,span 或 label 就是保持原来的长度不变。为什么会出现这种情况呢?
我们平时给 div 定义长度会立即生效,为什么 span 或 label 就无效呢?经对比可以发现,div 默认是 block 元素,而 span 或 label 却不是 block 元素,所以无论怎么定义长度,span 或 label 都无效,其它非 block 元素也是这样。解决办法很简单,只要把 span 或 label 定义为 block 或 inline-block,span 或 label 长度就会生效。
css span label 长度无效举例如下:
1、css 为:
.product{ width:950px; list-style:none;}
.product li label{ width:120px;}
2、html 为:
- 产品名称单价销量
- 联想笔记本电脑365016
- 华硕笔记本电脑385013
效果如下图所示:
图1
css 样式虽然给 label 加了 width:120px,但从上图可以看出,根本没有起作用,文字还是紧挨着。
给 label 加上 inline-block 属性后,则 label 长度生效(见图2),即 css 变为:
.product{ width:950px; line-height:22px; list-style:none; }
.product li label{ width:120px; display:inline-block;}
图2
从图2中可以看出,表格的每一列长度都是 120,文字对得很齐,说明 label 长度起了作用。
上面的 lable 也可以改用 span ,即:
- 产品名称单价销量
- 联想笔记本电脑365016
- 华硕笔记本电脑385013