上一篇
下一篇
一行内两列LI,一个LI内两列
作者:dangbao 日期:2008-08-27
这个标题可能有点绕口，不过你想你看了效果以后就会知道，相信很多人都用过这样的布局。这个效果用TABLE很好做，用LI来实现难点在于LI的宽度控制，太宽了就会回行，太窄了右列标题挤到了左面。而且li有背景，每隔8行需要有空层，HOHO，造成浏览器BUG的机率太大了，反复调试吧。下面是我自己调试出来的效果，起到抛砖引玉的效果，希望引起关注。
点击查看效果
源码
点击查看效果
源码
Code
<!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>无标题文档</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{clear:both;width:900px;height:15px;overflow:hidden;}
.subcontent .gray a{color:#666}
</style>
</head>
<body>
<div class="subcontent">
<ul>
<li><span>2008-08-27</span><a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li>
<li><span>2008-08-27</span><a href="#">郑智即将以250万镑重返英超</a></li>
<li><span>2008-08-27</span><a href="#">刘翔低调亮相奥运会总结大会</a></li>
<li><span>2008-08-27</span><a href="#">胡锦涛:中国经济面临压力</a></li>
<li><span>2008-08-27</span><a href="#">保险3巨头股票投资缩水1500亿 继续看空A股</a></li>
<li><span>2008-08-27</span><a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li>
<li><span>2008-08-27</span><a href="#">郑智即将以250万镑重返英超</a></li>
<li><span>2008-08-27</span><a href="#">刘翔低调亮相奥运会总结大会</a></li>
<div class="space"></div>
<li class="gray"><span>2008-08-27</span><a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">郑智即将以250万镑重返英超</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">刘翔低调亮相奥运会总结大会</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">胡锦涛:中国经济面临压力</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">保险3巨头股票投资缩水1500亿 继续看空A股</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">郑智即将以250万镑重返英超</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">刘翔低调亮相奥运会总结大会</a></li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</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{clear:both;width:900px;height:15px;overflow:hidden;}
.subcontent .gray a{color:#666}
</style>
</head>
<body>
<div class="subcontent">
<ul>
<li><span>2008-08-27</span><a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li>
<li><span>2008-08-27</span><a href="#">郑智即将以250万镑重返英超</a></li>
<li><span>2008-08-27</span><a href="#">刘翔低调亮相奥运会总结大会</a></li>
<li><span>2008-08-27</span><a href="#">胡锦涛:中国经济面临压力</a></li>
<li><span>2008-08-27</span><a href="#">保险3巨头股票投资缩水1500亿 继续看空A股</a></li>
<li><span>2008-08-27</span><a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li>
<li><span>2008-08-27</span><a href="#">郑智即将以250万镑重返英超</a></li>
<li><span>2008-08-27</span><a href="#">刘翔低调亮相奥运会总结大会</a></li>
<div class="space"></div>
<li class="gray"><span>2008-08-27</span><a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">郑智即将以250万镑重返英超</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">刘翔低调亮相奥运会总结大会</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">胡锦涛:中国经济面临压力</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">保险3巨头股票投资缩水1500亿 继续看空A股</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">中秋节假期安排公布 9月13到15日放假三天</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">郑智即将以250万镑重返英超</a></li>
<li class="gray"><span>2008-08-27</span><a href="#">刘翔低调亮相奥运会总结大会</a></li>
</ul>
</div>
</body>
</html>
Tags: 
文章来自: 
引用通告: 
网摘收藏: 评论: 0 | 引用: 0 | 查看次数: -
发表评论
