cyxjq - 2007-12-9 19:59:00
效果图：
其实这个比较简单的，只是很多朋友不明白div或ul宽度与li宽度之间的关系而已，设好li的宽度，那么ul中能容下几个li就会显示几个，下面是代码，大家看看就明白了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd<;/a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml<;/a>">
<head>
<meta http-equiv="Content-Type" c />
<title>CSS 分栏样式 </title>
<style type="text/css">
<!--
body {
font-size:12px;
color:#000000;
}
a {
color:#000000;}
a hover{
color:#666666;}
.subnewslist {
border-top: 3px solid #FFFFFF;
margin: 0 auto;
padding: 3px 5px 0px 5px;
width: 559px;
background: #F1F1F1;
height: 418px !important;
height: 398px;
}
.subnewslist ul {
margin: 0 auto;
padding: 0;
}
.subnewslist li {
border-bottom: #DDDDDD 1px solid;
float: left;
padding: 5px 0px 0px 10px;
width: 269px;
background: url(../images/li.gif) no-repeat 0px 2px;
height: 22px;
overflow: hidden;
}
.subnewslist li a {
overflow: hidden;
}
.subnewslist li a:hover {
text-decoration: underline;
}
.onesubnewslist {
border-top: 3px solid #FFFFFF;
margin: 0 auto;
padding: 3px 5px 0px 5px;
width: 559px;
background: #F1F1F1;
height: 418px !important;
height: 398px;
}
.onesubnewslist ul {
margin: 0 auto;
padding: 0;
}
.onesubnewslist li {
border-bottom: #DDDDDD 1px solid;
float: left;
padding: 5px 0px 0px 10px;
width: 552px !important;
width: 549px;
background: url(../images/li.gif) no-repeat 0px 2px;
height: 22px;
overflow: hidden;
}
.onesubnewslist li a {
overflow: hidden;
}
.onesubnewslist li a:hover {
text-decoration: underline;
}
.onesubnewslist span {
float:right;
padding-right:5px;
color:#333;
}
-->
</style>
</head>
<body>
<div class="subnewslist">
<ul>
<li><a title="根域名服务器首进中国 网速提高" href="#">根域名服务器首进中国 网速提高</a></li>
<li><a title="龙芯电脑一周内被抢购一空" href="#">龙芯电脑一周内被抢购一空</a></li>
<li><a title="微软在华推出Windows Live Expo测试版服务" href="#">微软在华推出Windows Live Expo测试版服务</a></li>
<li><a title="信产部部长:中国将很快发放3G牌照" href="#">信产部部长:中国将很快发放3G牌照</a></li>
<li><a title="百度启动国际化战略 明年进军日本市场" href="#">百度启动国际化战略 明年进军日本市场</a></li>
<li><a title="微软Vista中国售价全球最低 传言售价仅300元" href="#">微软Vista中国售价全球最低 传言售价仅</a></li>
<li><a title="微软Vista昨日在京发布 三大商务引擎启动" href= 9 7 3 1 2 3 4 8 :
其实这个比较简单的，只是很多朋友不明白div或ul宽度与li宽度之间的关系而已，设好li的宽度，那么ul中能容下几个li就会显示几个，下面是代码，大家看看就明白了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd<;/a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml<;/a>">
<head>
<meta http-equiv="Content-Type" c />
<title>CSS 分栏样式 </title>
<style type="text/css">
<!--
body {
font-size:12px;
color:#000000;
}
a {
color:#000000;}
a hover{
color:#666666;}
.subnewslist {
border-top: 3px solid #FFFFFF;
margin: 0 auto;
padding: 3px 5px 0px 5px;
width: 559px;
background: #F1F1F1;
height: 418px !important;
height: 398px;
}
.subnewslist ul {
margin: 0 auto;
padding: 0;
}
.subnewslist li {
border-bottom: #DDDDDD 1px solid;
float: left;
padding: 5px 0px 0px 10px;
width: 269px;
background: url(../images/li.gif) no-repeat 0px 2px;
height: 22px;
overflow: hidden;
}
.subnewslist li a {
overflow: hidden;
}
.subnewslist li a:hover {
text-decoration: underline;
}
.onesubnewslist {
border-top: 3px solid #FFFFFF;
margin: 0 auto;
padding: 3px 5px 0px 5px;
width: 559px;
background: #F1F1F1;
height: 418px !important;
height: 398px;
}
.onesubnewslist ul {
margin: 0 auto;
padding: 0;
}
.onesubnewslist li {
border-bottom: #DDDDDD 1px solid;
float: left;
padding: 5px 0px 0px 10px;
width: 552px !important;
width: 549px;
background: url(../images/li.gif) no-repeat 0px 2px;
height: 22px;
overflow: hidden;
}
.onesubnewslist li a {
overflow: hidden;
}
.onesubnewslist li a:hover {
text-decoration: underline;
}
.onesubnewslist span {
float:right;
padding-right:5px;
color:#333;
}
-->
</style>
</head>
<body>
<div class="subnewslist">
<ul>
<li><a title="根域名服务器首进中国 网速提高" href="#">根域名服务器首进中国 网速提高</a></li>
<li><a title="龙芯电脑一周内被抢购一空" href="#">龙芯电脑一周内被抢购一空</a></li>
<li><a title="微软在华推出Windows Live Expo测试版服务" href="#">微软在华推出Windows Live Expo测试版服务</a></li>
<li><a title="信产部部长:中国将很快发放3G牌照" href="#">信产部部长:中国将很快发放3G牌照</a></li>
<li><a title="百度启动国际化战略 明年进军日本市场" href="#">百度启动国际化战略 明年进军日本市场</a></li>
<li><a title="微软Vista中国售价全球最低 传言售价仅300元" href="#">微软Vista中国售价全球最低 传言售价仅</a></li>
<li><a title="微软Vista昨日在京发布 三大商务引擎启动" href= 9 7 3 1 2 3 4 8 :