侧边栏分类列表规整化

想弄已久，一直没有得闲。今天难得有点点闲空，莫名其妙的就把侧边栏整掉了。于是惯例撰文记录之。

主要问题很简单：如各位所见这个主题的侧边栏分类列表是分两栏显示的，并且默认对二级分类支持的不好。于是一旦打开了二级分类，那么整个显示就会很混乱。原因是一级分类两列显示后，二级分类紧跟着一级分类下面也分两栏显示，于是就出现了二级分类相互重叠以及部分二级分类跑到框外面去的问题。

在群里兄弟们的帮助下，得知分两列的方法是设定width。将ul的宽度设为两倍，li的宽度设为ul的一半，然后貌似要开个浮动，就可以实现两列显示，代码可参见ul和li简单语句实现DIV+CSS分两列（多列）布局显示。这么一分析就很简单了，现在分两行显示是因为主题内将.rsidebar ul li ul的width设为255px，而将.categories ul li的width设为112px，于是实现了两列显示。

找到了问题根源，接下来就要考虑怎么改。一开始的思路是一级分类仍然分两列显示，但是二级分类不分列。然而实际效果很差。于是就想到了现在这样的模式，将一级分类不分列，二级分类分列显示。

修改步骤也很简单，wp_list_categories函数在输出子分类时，会加上“ul class=children”这样的标签。那么就针对这个来修改，把.categories ul li的width修改为255px，然后把.categories ul li ul.children的width也设为255px，再将.categories ul li ul.children li的width设为112px。目前的样式基本就完成了。

改完的CSS代码如下：

.categories ul li{
float:left;
width:255px;
line-height:16px;
}
.categories ul li ul.children {
width: 255px;
padding-left: 0px;
}

.categories ul li ul.children li{
width: 112px;
}

但是改完后感觉还是不是很好看，尤其原本分类名称长短不一，整个列表看起来很混乱。又根据群里兄弟们的建议，考虑将列表中的数字部分右对齐。就原理而言，就是想办法把文字部分的width定死。然而实际操作比较困难，因为wp_list_categories输出后的格式很死，基本没有什么修饰。唯一可以下手的，也就是文字部分有个“a href”而数字部分没有了。而翻阅css手册的话，说a属性并不是block级元素，因此无法对其设定width等属性。

经过本菜鸟全力GG以后，终于发现可以使用display:block的定义使得a部分被变为block级元素，然而block级元素的默认宽度是父级元素的宽度，并且占据一整行的页面空间。为了防止数字被打到下一行，又搜索到另一篇超级链接美化的文章里面，称设置链接元素为左浮动，并设置左边距，即可不占用一整行。实际测试也是如此。

因此，最终对列表内a属性的css定义如下：

.categories ul li ul.children li a{
display: block;
float: left;
margin-left: 0px;
width: 65px;
/*text-justify: distribute-all-lines;
text-align: justify;*/
}

可以看到里面有两行被注释掉的文字，那是因为实现后仍然觉得不是特别好看，因为当时第一个一级分类下的二级分类名有的是两个字，还是有些参差不齐。于是试图让文字两端对齐，因此尝试使用了text-justify和text-align的justify。然而测试下来的结果是text-align:justify单独使用好像没有任何效果，而text-justify在IE下可正常解析，FX下则无任何效果。最大的问题还是IE下正常解析依然不好看。最终还是妥协，决定将那两个两个字的二级分类名全部改为四个字。并将某个6个字的分类名也减缩到3个字。于是便是现在侧边栏的效果。

实际看起来，还是有点点不舒服，主要是中间的那些还是有点空。但是比以前还是要好一些的。于是心满意足的决定停止折腾。

以上，菜鸟瞎整CSS流程记录完毕。

最后编辑：2009-07-02

作者：龙天

这个作者貌似有点懒，什么都没有留下。

站内专栏 站点