目录
回复讨论(解决方案)
首页 web前端 html教程 关于li占位问题_html/css_WEB-ITnose

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

Jun 24, 2016 pm 12:20 PM

本帖最后由 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>
    登录后复制

    我的意思是要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>
    登录后复制

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门文章

    仓库:如何复兴队友
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    1 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热门文章

    仓库:如何复兴队友
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    1 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热门文章标签

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

    如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

    如何使用HTML5表单验证属性来验证用户输入?

    如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

    如何高效地在网页中为PNG图片添加描边效果?

    &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

    &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?

    使用IFRAME的安全性含义是什么?如何减轻它们? 使用IFRAME的安全性含义是什么?如何减轻它们? Mar 18, 2025 pm 02:51 PM

    使用IFRAME的安全性含义是什么?如何减轻它们?

    我如何使用html5&lt; meter&gt; 要在范围内显示数值数据的元素? 我如何使用html5&lt; meter&gt; 要在范围内显示数值数据的元素? Mar 12, 2025 pm 04:08 PM

    我如何使用html5&lt; meter&gt; 要在范围内显示数值数据的元素?

    HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

    HTML5中跨浏览器兼容性的最佳实践是什么?

    我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? 我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

    我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?

    See all articles