html label修改长度,css span label 长度无效

有时需要给 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