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 为：

　　<style type="text/css">
　　　.product{ width:950px; list-style:none;}
　　　.product li label{ width:120px;}
　　</style>

　　2、html 为：

　　<ul class="product">
　　　<li><label>产品名称</label><label>单价</label><label>销量</label></li>
　　　<li><label>联想笔记本电脑</label><label>3650</label><label>16</label></li>
　　　<li><label>华硕笔记本电脑</label><label>3850</label><label>13</label></li>
　　</ul>

　　效果如下图所示：

图1

　　css 样式虽然给 label 加了 width:120px，但从上图可以看出，根本没有起作用，文字还是紧挨着。

　　给 label 加上 inline-block 属性后，则 label 长度生效（见图2），即 css 变为:

　　<style type="text/css">
　　　.product{ width:950px; line-height:22px; list-style:none; }
　　　.product li label{ width:120px; display:inline-block;}
　　</style>

图2

　　从图2中可以看出，表格的每一列长度都是 120，文字对得很齐，说明 label 长度起了作用。

　　上面的 lable 也可以改用 span ，即：

　　<ul class="product">
　　　<li><span>产品名称</span><span>单价</span><span>销量</span></li>
　　　<li><span>联想笔记本电脑</span><span>3650</span><label>16</span></li>
　　　<li><span>华硕笔记本电脑</span><span>3850</span><label>13</span></li>
　　</ul>