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

Inkandwash主题 分类目录太长,且边上空着的地方
太多。完全可以分为两列显示。
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;
}

3 条评论

  1. 番茄说道:

    几次请教加修改,又把我的博客分类目录搞定了。

  2. amyliu说道:

    :!: 鸟文,甲骨文

留下只言片语: