您的位置首页CSS

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

​大型网站中间那部分的效果:由于文章的标题的长度不一样,会自动实现行满后下一个标题自动换行,不满,则在后面继续添加。本来还以为这块是由后台单独去做的,

大型网站中间那部分的效果:由于文章的标题的长度不一样,会自动实现行满后下一个标题自动换行,不满,则在后面继续添加。本来还以为这块是由后台单独去做的,今天看到这种效果,居然是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>

本文来自网络,不代表芝麻站长立场,转载请注明出处:http://www.wuhu815.com/css/201979211228.html
联系我们

联系我们

173-5429-9937

在线咨询: QQ交谈

邮箱: web018@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部