WordPress分类目录多列显示 Inkandwash主题多列

bywzy 发表于 技术交流 分类,
2

最近换了新的wordpress主题 现在用的是Inkandwash主题 但分类目录太长,且边上空着的地方
太多。完全可以分为两列显示。
在google搜索”分类目录多列插件”, 有用语句进行分类的,但感觉这个方式不是太好。后来找到了用
CSS实施的。全文如下:-_-。
————————————————————————————-
用FireBug查看分类目录的html和css:
ul li实现多列显示很容易。在wp-content/themes/ /style.css中加入下面的样式:
<li>
<h3>分类目录</h3>
<ul>
 <li><a title=”xxx” href=”xxx”>xx</a><a title=”查看 VPS 下的所有文章” href=”http://www.aggron.org/archives/category/vps”>VPS</a> (1)</li>
 <li></li>
 <li><a title=”查看 Python 下的所有文章” href=”http://www.aggron.org/archives/category/python”>Python</a> (1)</li>
</ul>
</li>

widget_categories ul{
width:261px;
display:block;
overflow:auto;
}
.widget_categories ul li{
width:87px;
float:left;
}
这样就完成了3列显示, 如果做成2列, li的宽度就应该为261/2。
当父容器中的子容器有float属性时,父容器不会按规则扩展,可以在父容器中加overflow:auto来清除浮动。

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留以下信息:
原文作者:Aggron 和原文链接:http://aggron.org/archives/wp-multicol-categories.html
————————————————————————————-
在Inkandwash主题中两列的显示距离只有200,我自己用的代码如下,Inkandwash主题的可直接复制使用:
/*目录为两列显示,2010-4-26添加的*/
.widget_categories ul{
width:200px;
display:block;
overflow:auto;
}
.widget_categories ul li{
width:80px;
float:left;
}

« 上一篇: :下一篇 »

2 篇评论 关于 “WordPress分类目录多列显示 Inkandwash主题多列”

发表我的评论

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif