[模板小教程]根据标题长度自适应排列一行显示几个标题帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → [模板小教程]根据标题长度自适应排列一行显示几个标题

【本版专题贴子】

1/3 1 2 3 ›› ›|

禾火木风
用户头衔：嘉宾

精华贴   ：11
发贴数   ：5478
经验值   ：14181
注册时间：2006-03-02

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

[模板小教程]根据标题长度自适应排列一行显示几个标题

这个在门户网站用得比较多，就是根据标题长度自动调整一行显示几个文章标题。风讯和动易有个“智能化标签”，但效果不理想。现在要说的是通过CSS控制实现这一目的。

演示地址：
http://www.cmsmb.cn/demo/001.html

在以后，我将陆续写些这类的小教程。大家有哪方面的需求，可以发信息给我。

HTML代码：

<table width="350" border="0" cellpadding="0" cellspacing="10" id="demo">
<tr>
   <td><ul>
   <li><a title="风讯自由标签教程" href="http://www.cmsmb.cn/cmsdoc/foosun/200703/71.html">风讯自由标签教程</a> </li>
   <li><a title="漂亮的FLASH幻灯新闻标签" href="http://www.cmsmb.cn/cmsdoc/foosun/200703/70.html">漂亮的FLASH幻灯新闻标签</a> </li>
   <li><a title="新闻列表增加样式列表" href="http://www.cmsmb.cn/cmsdoc/foosun/200703/69.html">新闻列表增加样式列表</a> </li>
   <li><a title="实现google的全站sitemap制作教程" href="http://www.cmsmb.cn/cmsdoc/ecms/200702/60.html">实现google的全站sitemap制作教程</a> </li>
   <li><a title="几个实用的“自由标签”样式代码" href="http://www.cmsmb.cn/cmsdoc/foosun/200702/59.html">几个实用的“自由标签”样式代码</a> </li>
   <li><a title="学习CSS布局心得" href="http://www.cmsmb.cn/tech/xhtml/200704/xhtml85.html">学习CSS布局心得</a> </li>
   <li><a title="网页一屏到底有多大" href="http://www.cmsmb.cn/tech/design/200704/design80.html">网页一屏到底有多大</a> </li>
   <li><a title="著名设计师的标志(Logo)设计观" href="http://www.cmsmb.cn/tech/design/200704/design79.html">著名设计师的标志(Logo)设计观</a> </li>
   <li><a title="css定位与定位应用详细说明" href="http://www.cmsmb.cn/tech/xhtml/200704/xhtml78.html">css定位与定位应用详细说明</a> </li>
   <li><a title="垂直三栏布局相同高度的方法" href="http://www.cmsmb.cn/tech/xhtml/200704/xhtml77.html">垂直三栏布局相同高度的方法</a></li>
   </ul></td>
</tr>
</table>

CSS代码：

#demo {
border: 1px solid #ccc;
}
#demo ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#demo ul li {
float: left;
padding: 0px 8px;
background: url(http://www.cmsmb.cn/images/icon_d.gif) no-repeat left center;
margin: 0px;
}
#demo ul li a {
white-space: nowrap;
line-height: 1.8;
}
#demo ul li a:hover {
color: #f30;
}

上传以下图片：