关于li占位有关问题-HTML教程-爱易网页

关于li占位有关问题

日期：2014-05-17　浏览次数：20689 次

关于li占位问题

本帖最后由 liwan123 于 2013-04-10 18:44:27 编辑

现在我有多个div，代码类似<DIV class="lsoftware-summary ztfontcolorx" name="testD">
<UL class="clearfix">
  <ul>
    <li class="lbianhao">206231991</li>
  </ul>
  <LI class="lmingcheng"> 的发生大法师打发</LI>
  <LI class="lbumen">集团公司</LI>
  <LI class="lriqi">2001-06-01</LI>
  <LI class="lzhuangtai">即将实施</LI>
</UL>
</DIV>
css样式是.lsoftware-summary{float:left;padding:1px;width:960px;}
.lsoftware-summary li{float:left;line-height:26px;white-space:nowrap;overflow:hidden;font-size:14px;text-align:center;margin-left:1px;background:#E1F0FF;display:block;}
.lbianhao{width:120px;zoom:1;}
.lmingcheng{width:510px;zoom:1;}
.lbumen{width:160px;zoom:1;}
.lriqi{width:90px;zoom:1;}
.lzhuangtai{width:70px;zoom:1;}
.ztfontcolorg{color:#F00;}
.ztfontcolorx{color:#000;}
.ztfontcolorj{color:#090;}
.ztfontcolorz{color:#900;}
现在有个问题<LI class="lbumen">集团公司</LI>之间内容为空时，直接不显示占位，而是后面的li直接递补到前面了，不知道这个问题怎么解决？

CSS

------解决方案--------------------
通过JS判断Class=lbumen这个元素是否有值，如果没值就把该元素隐藏或者把上一级UL隐藏
------解决方案--------------------



<style type="text/css">

.lsoftware-summary{float:left;padding:1px;width:960px;}

 .lsoftware-summary li{float:left;line-height:26px;white-space:nowrap;overflow:hidden;font-size:14px;text-align:center;margin-left:1px;background:#E1F0FF;display:block;}

 .lbianhao{width:120px;zoom:1;}

 .lmingcheng{width:510px;zoom:1;}

 .lbumen{width:160px;zoom:1;}

 .lriqi{width:90px;zoom:1;}

 .lzhuangtai{width:70px;zoom:1;}

 .ztfontcolorg{color:#F00;}

 .ztfontcolorx{color:#000;}

 .ztfontcolorj{color:#090;}

 .ztfontcolorz{color:#900;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		if($("div ul li:eq(2)").text()==""){

			$(this).hide();

		}

	});

</script>

<DIV class="lsoftware-summary ztfontcolorx" name="testD">

 <UL class="clearfix">

   <ul>

     <li class="lbianhao">206231991</li>

   </ul> 

   <LI class="lmingcheng"> 的发生大法师打发</LI>

   <LI class="lbumen">集团公司</LI>

   <LI class="lriqi">2001-06-01</LI>

   <LI class="lzhuangtai">即将实施</LI>

 </UL>

 </DIV>

------解决方案--------------------
设置高度咯或用个空文本占位
------解决方案--------------------

------解决方案--------------------



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content=

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

关于li占位有关问题

相关资料更多>

推荐阅读更多>