返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

css span label 长度无效解决方案

时间:2017-12-11 23:15来源:电脑教程学习网 www.etwiki.cn 编辑:admin

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

  效果如下图所示:

css label 长度无效

图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>

css span 长度无效

图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>

------分隔线----------------------------
标签(Tag):css
------分隔线----------------------------
推荐内容
猜你感兴趣