施用CSS，UL，LI实现新闻标题分栏显示
日期：2014-05-17 浏览次数：20924 次
首先看效果：
代码：
<!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" c />
<title>CSS 分栏样式：使用CSS，UL，LI实现新闻标题分栏显示</title>
<style type="text/css">
<!--
.relationNews{width:660px;font-size:16px; font-weight:bold; margin: 0 auto;}
.relationNewsList{
font-size:13px;
border-top: 1px solid #000000;
margin: 0 auto;
padding: 3px 5px 0px 5px;
width:660px;
height: 200px;
}
.relationNewsListul {
margin: 0 auto;
padding: 0;
}
.relationNewsList li {
border-bottom: #DDDDDD 1px solid;
float: left;
padding: 5px 0px 0px 10px;
width: 320px;
background: url(li.gif) no-repeat 0px 10px;
height: 22px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div class="relationNews">相关新闻：</div>
<div class="relationNewsList">
<ul>
<li><a target="_blank" href="http://news.sctv.com/gnxw/rdxw/201207/t20120727_1212988.shtml">天津暴雨内涝 市民骑摩托艇上街</a></li>
<li><a target="_blank" href="http://leaders.people.com.cn/n/2012/0727/c58278-18609666.html">河北保定暴雨因灾死亡26人 失踪20人</a></li>
<li><a target="_blank" href="http://inews.nmgnews.com.cn/system/2012/07/27/010808976.shtml">呼和浩特暴雨已致5人死亡 各界齐力抗灾</a></li>
<li><a target="_blank" href="http://news.163.com/12/0726/14/87BK6LG70001124J.html">深圳因台风倒树11万棵 远超香港千余棵</a></li>
<li><a target="_blank" href="http://news.sina.com.cn/c/2012-07-26/143924850041.shtml">河北野三坡景区交通电力通信恢复 13人因灾死亡</a></li>
<li><a target="_blank" href="http://kuaixun.stcn.com/content/2012-07/26/content_6390597.htm">北京房山全面消毒 目前未发现疫情</a></li>
<li><a target="_blank" href="http://news.022china.com/2012/07-26/722274_0.html">北京安监启动灾后检查 大型演唱会遇暴雨或停止</a></li>
<li><a target="_blank" href="http://society.people.com.cn/n/2012/0726/c86800-18604071.html">受持续强降雨影响的京包铁路恢复通车</a></li>
</ul>
</div>
</body>
小结：
留意突出颜色部分CSS代码，分栏的栏目由外面的div和li的宽度共同决定。div宽度是li宽度整除N倍时，就被分为N栏。比如：上面relationNewsList width:660px; 而li的宽度为width: 320px;那么宽度倍数就是2倍多，所以分为两栏。如果将relationNewsList宽度设为900px,li的宽度设为288px,则会被分为三栏。
以下为相关显示效果：
