Heim > Web-Frontend > HTML-Tutorial > 关于li占位问题_html/css_WEB-ITnose

关于li占位问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:20:29
Original
1624 Leute haben es durchsucht

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

CSS

现在我有多个div,代码类似


      

          
    • 206231991

    •   
     
      
  •  的发生大法师打发

  •   
  • 集团公司

  •   
  • 2001-06-01

  •   
  • 即将实施



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直接递补到前面了,不知道这个问题怎么解决?

    回复讨论(解决方案)

    通过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>
    Nach dem Login kopieren

    我的意思是要li强制占位,不是li没内容时进行隐藏,这个有什么好办法吗?

    设置高度咯或用个空文本占位

    谢谢,用了空白符号实现了,呵呵


    <!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="text/html; charset=gb2312" /><title></title><style>.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; float:left; display:inline; height:26px; line-height:26px;}.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></head><body><DIV class="lsoftware-summary ztfontcolorx" name="testD"><UL class="clearfix">  <ul>    <li class="lbianhao"></li>  </ul>   <LI class="lmingcheng"> 的发生大法师打发</LI>  <LI class="lbumen">集团公司</LI>  <LI class="lriqi">2001-06-01</LI>  <LI class="lzhuangtai">即将实施</LI></UL></DIV></body></html>
    Nach dem Login kopieren

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage