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转换成块元素或者加入高度，这样基本就能解决这类问题。

 

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

谢谢！