Css样式不能正常显示

今天在研究JQuery的时候，遇到这样一个问题，在用CSS+UL布局的时候，line-height:30px;使用这个属性竟然不生效，但是在设计效果里面又能看到效果，可是一运行，竟然不生效？

 

我界面布局代码如下：

<div> <div class="div_check"><input id="allCleck" type="checkbox" />全选/全不选</div> <div id="elect"> <ul> <li><input id="Checkbox2" type="checkbox" />1.测试数据信息</li> <li><input id="Checkbox3" type="checkbox" />2.测试数据信息</li> <li><input id="Checkbox4" type="checkbox" />3.测试数据信息</li> <li><input id="Checkbox5" type="checkbox" />4.测试数据信息</li> <li><input id="Checkbox6" type="checkbox" />5.测试数据信息</li> <li><input id="Checkbox7" type="checkbox" />6.测试数据信息</li> <li><input id="Checkbox8" type="checkbox" />7.测试数据信息</li> <li><input id="Checkbox9" type="checkbox" />8.测试数据信息</li> <li><input id="Checkbox10" type="checkbox" />9.测试数据信息</li> <li><input id="Checkbox11" type="checkbox" />10.测试数据信息</li> <li><input id="Checkbox12" type="checkbox" />11.测试数据信息</li> <li><input id="Checkbox13" type="checkbox" />12.测试数据信息</li> </ul> </div> </div>

 

我的CSS文件代码：

body { margin:0; padding:0; font-size:12px; font-family:Arial; } .div_check { margin:5px 20px; border:solid 1px #eac; } #elect { margin:5px 20px; border:solid 1px #eac; } #elect ul { margin:0 5px; } #elect ul li { line-height:30px; list-style-type:none; }

 

最后我给#elect ul li加了一个高度： height:30px; 

OK，效果出来了。

但是问题解决了，原因还是得找出来，把我们公司的专业美工给请来问问：她告诉我说，li,p等里面的文字如果添加了图片、复选框或者其它元素，那么文字将会一图片、复选框的底部对齐排版，而这个时候的行高(line-height)是无法起到作用，我们需要把li、p转换成块元素或者加入高度，这样基本就能解决这类问题。

 

有可能这样的理解有错误，但是这是我实践的方法，希望大家如果有其它方法，留言或短信相告。

谢谢！