Life Journal

随笔,及其他

我是 Xiao Xiao,在日本的产品经理,偶尔也写代码,iOS/Mac/Web,偶尔也做设计,爱用 Sketch,偶尔写文字,存在这里。


让Wordpress侧边栏的分类列表可以横向排列

WordPress默认提供在侧边栏显示日志“分类”的Widget,很多主题也包含了在侧边栏显示“分类”的功能。但大多数情况下,这些“分类”列表默认都是以纵向的形式显示的。有时候我们的侧边栏较宽时,类别的右侧会空出较大的空白区域;有时候分类过多时,列表的长度也会变得超出想象。在这种情况下较为明智的选择是让分类列表支持横向排列,以利用右侧的空白区域。实际效果见右侧侧边栏。

要实现这种效果,只需要让整个的分类块都向左浮动。代码如下:

?Download download.css
1 2 3 4 5 6

li.cat-item{float:left;}.widget_categories ul{overflow:hidden;}

说明,在这里我是用侧边栏的分类widget实现的。如果你是用的和我一样,那么不需要做出更改,直接将代码添加到主题的style.css文件中即可。如果你是用主题自带的函数调用的方式实现的显示分类功能,那么请自行确定分类列表内每条目li的class为cat-item,分类列表ul上层的li的class为widget_categories,否则请自行修改。

之所以要对ul设置overflow,是为了让其自动清理浮动的标记,如果没有做的话,分类列表下面的元素会因为上面的左浮动的列表没有占用块空间而向上挤(具体效果可以自己试试)。由于overflow可能会影响性能,你也可以设置为左浮动,但IE和Opera的效果会受影响。