Home >Web Front-end >HTML Tutorial >About li placeholder issue_html/css_WEB-ITnose
About li placeholder issue_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:20:291618browse
CSS
Now I have multiple divs with code similar to 71d9fbf3086565433ac40545af2f659fbdffc51c0735c007e29d5119b1196656
ff6d136ddc5fdfeffaf53ff6ee95f185
> 929d1f5ca49e04fdcb27f9465b944689
00d4809ade05cdee98582ed9b78dad68 The Great Master sent awaycbf331b4cac0bfbcf2a714e444b23b14
ea1bdb97c614c9f0c36fa6ea6653bb75Group Companycbf331b4cac0bfbcf2a714e444b23b14
8d7c5615022abdd605586da2215e8ef22001-06-01cbf331b4cac0bfbcf2a714e444b23b14
72c9f3a8e72844743234ade6b3453f20To be implemented sooncbf331b4cac0bfbcf2a714e444b23b14
793ab7d6fe4340f6ff69df0dcf61f429
c997cec9f4b83324a7145373fde865ba
The css style is .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;}
Now there is a problem. When the content between ea1bdb97c614c9f0c36fa6ea6653bb75Group Companycbf331b4cac0bfbcf2a714e444b23b14 is empty, the placeholder is not displayed directly, but The li at the back is directly added to the front. I don’t know how to solve this problem?
Reply to the discussion (solution)
Use JS to determine whether the element Class=lbumen has a value. If it has no value, hide the element or hide the upper level 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> What I mean is to force li to occupy space, not to hide it when there is no content in li. Is there any good way to do this? Set the height or use an empty text placeholder
Thank you, I used whitespace symbols to achieve it, haha
<!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>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn