一行内两列LI，一个LI内两列的效果

2022-07-15 80酷酷网 80kuku.com

这个标题可能有点绕口，实际是两列的LI，LI内又分两列。所以看起来是4列。只好写了这个标题。不过你想你看了效果以后就会知道，相信很多人都用过这样的布局。这个效果用TABLE很好做，用LI来实现难点在于LI的宽度控制，太宽了就会回行，太窄了右列标题挤到了左面。而且li有背景，每隔8行需要有空层，HOHO，造成浏览器BUG的机率太大了，反复调试吧。下面是我自己调试出来的效果，起到抛砖引玉的效果，希望引起关注。
以下是HTML网页特效代码，点击运行按钮可查看效果：以下是程序代码<!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=utf-8" /><title>用li来写4列数据保持垂直对齐</title><style>*{margin:0;padding:0;border:0;list-style:none;font-size:12px; font-family:"宋体"}a{color:#333;text-decoration:none;}a:hover{color:#666;text-decoration:underline;}.subcontent{width:999px;margin:10px auto;background:url(http://www.dangbao.net/attachments/month_0808/subbodybg.gif) repeat-y;border-top:1px solid #9c9b9a;border-bottom:1px solid #9c9b9a;overflow:hidden}.subcontent ul{margin:15px 0;width:999px;overflow:hidden}.subcontent li{float:left;width:44%;line-height:23px;background:url(http://www.dangbao.net/attachments/month_0808/point.gif) no-repeat 30px 10px;padding-left:40px;overflow:hidden; display:inline;margin-right:15px}.subcontent li span{float:right;color:#666}.space{display:block;clear:both;width:900px;height:15px;overflow:hidden;}.subcontent .gray a{color:#666}</style></head><body><div class="subcontent"><ul><li>2008-08-27<a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li><li>2008-08-27<a href="#">郑智即将以250万镑重返英超</a></li><li>2008-08-27<a href="#">刘翔低调亮相奥运会总结大会</a></li><li>2008-08-27<a href="#">胡锦涛:中国经济面临压力</a></li><li>2008-08-27<a href="#">保险3巨头股票投资缩水1500亿继续看空A股</a></li><li>2008-08-27<a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li><li>2008-08-27<a href="#">郑智即将以250万镑重返英超</a></li><li>2008-08-27<a href="#">刘翔低调亮相奥运会总结大会</a></li><li class="gray">2008-08-27<a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li><li class="gray">2008-08-27<a href="#">郑智即将以250万镑重返英超</a></li><li class="gray">2008-08-27<a href="#">刘翔低调亮相奥运会总结大会</a></li><li class="gray">2008-08-27<a href="#">胡锦涛:中国经济面临压力</a></li><li class="gray">2008-08-27<a href="#">保险3巨头股票投资缩水1500亿继续看空A股</a></li><li class="gray">2008-08-27<a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li><li class="gray">2008-08-27<a href="#">郑智即将以250万镑重返英超</a></li><li class="gray">2008-08-27<a href="#">刘翔低调亮相奥运会总结大会</a></li></ul></div></body></html><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]