让Wordpress侧边栏的分类列表可以横向排列 « 晓 - Life Journal

让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的效果会受影响。

Sid 晓 星期日, 十月 26th, 2008 06:45 下午 GMT +8
  1. super37

    这么短的分类ID的不多。

    星期日, 十月 26th, 2008 07:14 下午 GMT +8
    • 晓晓

      嘛。。也是。。。估计只有偶这种懒人才会取这么短的ID了。。。o(∩_∩)o...

      星期日, 十月 26th, 2008 07:17 下午 GMT +8
  2. David Lau

    你很喜欢用这种特占资源的主题,呵呵~
    不过比上次那个主题好一点了,上次那个主题,一打开你的博客,我的电脑就嗡嗡作响

    星期二, 十月 28th, 2008 09:48 下午 GMT +8
    • 晓晓

      嘛。。。要说占资源。。不过是一些透明的渲染嘛。。。IE渲染慢是很正常的,偶的FF一向很稳定啊。。
      其实偶是觉得吧,像silverlight那样的未来主流技术都要不少的渲染。。。所以这个渲染的性能以后肯定会不断的提升的。。。

      星期二, 十月 28th, 2008 10:12 下午 GMT +8
  3. David Lau

    分类没有必要横向排列吧?

    星期二, 十月 28th, 2008 09:49 下午 GMT +8
    • 晓晓

      嘛,主要是我的侧边栏比较特殊——长得不行了,所以不得不这样修改以缩短长度啊。。。

      星期二, 十月 28th, 2008 10:15 下午 GMT +8
  4. NetPuter

    还行~我觉得应该要多加一个clear:both给父DIV,以防万一~

    星期五, 十月 31st, 2008 12:34 下午 GMT +8
    • 晓晓

      嗯,确实。我的侧边栏比较特殊——整体是一个ul,而且没有整体浮动的li,所以没往这方面想。。o(∩_∩)o...谢谢提醒哈~~

      星期五, 十月 31st, 2008 12:47 下午 GMT +8
    • 晓晓

      最主要的问题是wordpress的侧边栏都是自己生成,要设置下面的元素的style会很麻烦。。。

      星期五, 十月 31st, 2008 12:51 下午 GMT +8
  5. Young

    有意思,虽然我目前用不上。

    星期日, 十一月 2nd, 2008 01:12 上午 GMT +8
  6. David Lau

    想弄个网站,发现需要用到分类横向排列,不过我需要将分类、子分类按照级别输出到一个页面,同时需要等宽排列,好像有点困难哦!

    星期三, 十一月 5th, 2008 05:10 下午 GMT +8
And a comment!
Your name
Your mail (will not be published)
Your website