CSS实现每行新闻数量不等效果代码_经验交流

  • A+
所属分类: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 rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5qYjUxLm5ldA==">1.脚本代码收藏站,AJAX/JS/ASP/PHP一网打尽[特别推荐]!</a></li> 
<li class="t1"><a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5rYW5zaHVsZS5jb20=">2.看书了小说网!</a></li> 
<li class="t1"><a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5iYWlkdS5jb20v">3.中文最强大的搜索引擎!</a></li> 
<li class="t1"><a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5qYjUxLm5ldC9zb2Z0cw==">4.脚本之家,下载中心!</a></li> 
<li class="t1"><a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5qYjUxLm5ldC9waG90b3Nob3A=">5.脚本之家新增加photoshop,flash,制作教程经典收藏!</a></li> 
  
</ul> 
</fieldset>

除非注明,否则均为@蒲公英博客原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.aipgy.com/306302.html

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: