因为帮助一个朋友解决这个问题，所以顺便发到论坛上来了
这个是我写的一个效果测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.txList_2 {
CLEAR: both;
OVERFLOW: hidden;
width: 360px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.txList_2 LI {
FLOAT: left; MARGIN: 0px 3px 0px 7px; WIDTH: 170px; LINE-HEIGHT: 21px; HEIGHT: 21px
}
-->
</style>
</head>
<body><div class=txList_2 >
<LI><A
href="#">把一行变成标题两行标题
</A></LI>
<LI><A href="#"
target=_blank>把一行变成标题两行标题</A> </LI>
<LI><A
href="#">把一行变成标题两行标题
</A></LI>
<LI><A
href="#"
target=_blank>把一行变成标题两行标题</A> </LI>
<LI><A
href="#">把一行变成标题两行标题
</A></LI>
<LI><A href="#"
target=_blank>把一行变成标题两行标题</A> </LI>
<LI><A
href="#">把一行变成标题两行标题
</A></LI>
<LI><A href="#"
target=_blank>把一行变成标题两行标题</A> </LI></div>
</body>
</html>
如果写成标签的形势是这样的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.txList_2 {
CLEAR: both;
OVERFLOW: hidden;
width: 360px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.txList_2 LI {
FLOAT: left; MARGIN: 0px 3px 0px 7px; WIDTH: 170px; LINE-HEIGHT: 21px; HEIGHT: 21px
}
-->
</style>
</head>
<body><!--#$array=$cms::thread("mid:1;num:10;digest:2");#-->
<ul class="txList_2">
<!--#foreach($array as $val){#-->
<li><a href="$val[url]" target="_blank" style="color:$val[titlecolor]">{@substrs($val[title],22)@}</a></li>
<!--#}#-->
</ul>
</body>
</html>
说明这里框架的txList_2宽度是360，txList_2 LI 的宽度是170，txList_2的宽度是txList_2 LI 宽度的2倍多20，标题的字数决定txList_2 LI 的宽度比如说我每个标题有11个字，那么txList_2 LI 的宽度是170，如果是20个子呢？那要你自己去测试了，只要保持上面的公式就可以了。
num:10(标题条数)这个一定要是个双数，每行两个的话，10个标题就是5行。
教你 如何在首页文章标题成两排显示!(用css控制) 转
温馨提示：
本文最后更新于1970年01月01日，已超过20079天没有更新，若内容或图片失效，请留言反馈。
发表者：chen'mo
最后修改：
1970年01月01日 08:00
本文链接：https://cmsblog.cn/355.html（非特殊说明，文章均收集于互网联！）
评论 (0)