当前位置:asp编程网>技术教程>Css3教程>  正文

CSS实现每行新闻数量不等效果

2008-10-10 10:15:30   来源:dlstu    作者:佚名   浏览量:2209   收藏
像大型网站中间那部分的效果:由于文章的标题的长度不一样,会自动实现行满后下一个标题自动换行,不满,则在后面继续添加。本来还以为这块是由后台单独去做的,今天看到这种效果,居然是CSS实现的。现在将它放到这里与大家共享
<style>
<!--
.title{
   font-size:14px;
   font-weight:bold;
   color:#FF6600
}
.t0{
   margin:3px;
   padding:3px;
   list-style-type:none;
   line-height:16px;
}
.t1{
  font-size:14px;
  margin-right:5px;
  height:16px;
  float:left;
  white-space : nowrap
}
//-->
</style>
<!--主体-->
<fieldset style="width:400px; float:left;">
<legend><span class="title">特别推荐</span></legend>
<ul class="t0">
<!--中间循环部份代码-->
<li class="t1"><a href="http://www.52hai.com/2005">1.代码收藏站,AJAX/JS/ASP/PHP一网打尽[特别推荐]!</a></li>
<li class="t1"><a href="http://www.aspprogram.cn">2.asp编程网!</a></li>
<li class="t1"><a href="http://www.2008zg.com/">3.SLJ'S 设计工作室!</a></li>
<li class="t1"><a href="http://www.2008zg.com/fanwen">4.世纪范文网,写作指导!</a></li>
<li class="t1"><a href="http://food.52hai.com">5.中华菜谱网,我爱菜谱网,菜谱经典收藏!</a></li>
<!--尾部代码-->
</ul>
</fieldset> 


关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网