wordpress友情链接分类目录多列显示

Posted in: Wordpress

换上elegant-box后,发现分类目录显示为一列,这有点看起来不舒服!分类目录和友情链接多了太占空间了,显示的老长老长的,最右边空空的,也很难看.找到一好办法来修改成为两列!!

原来只需要用ul li实现多列显示很容易。在style.css中加入下面的样式,就可以了:

        .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来清除浮动。
.blogroll{
width:261px;
display:block;
/*记得清除浮动*/
overflow:auto;
/*兼容IE6*/
zoom:1;
}
.blogroll li{
float:left;
width:130px;
display:block;
}
.blogroll{width:261px;display:block;/*记得清除浮动*/overflow:auto;/*兼容IE6*/zoom:1;}.blogroll li{float:left;width:130px;display:block;}
以上就实现了分类目录和友情链接双列显示!效果见本BLOG!你也可以试试!
分享到:

Related Posts

ads

20 Responses to wordpress友情链接分类目录多列显示

  • xyz

    Replied on: 2010 年 09 月 13 日, 10:10

    挺实用的

  • yesadmin

    Replied on: 2010 年 08 月 24 日, 18:39

    可惜我不会用呵呵,抄别人的,然后做点笔记
    @有点蓝

  • 有点蓝

    Replied on: 2010 年 08 月 24 日, 18:35

    强大的css

  • 小松

    Replied on: 2010 年 08 月 23 日, 00:09

    呵呵,这个能够充分利用空间~

  • 学夫子

    Replied on: 2010 年 08 月 22 日, 22:54

    话说我以前用wp的时候也是这个主题,也按照你的分法改为双列,现在没有用了,和

  • admin

    Replied on: 2010 年 08 月 22 日, 20:02

    哪就好好收藏呀@飞猪

  • 飞猪

    Replied on: 2010 年 08 月 22 日, 19:37

    嗯,以后用得着。。

  • admin

    Replied on: 2010 年 08 月 22 日, 19:00

    是的哦,呵@7cbt

  • 7cbt

    Replied on: 2010 年 08 月 22 日, 18:48

    这下友情分类看起来舒服多了。

  • admin

    Replied on: 2010 年 08 月 22 日, 18:02

    管不了哪么多了,搞来搞去很累的,还有很多标准呢!@羽中

  • 羽中

    Replied on: 2010 年 08 月 22 日, 18:01

    我的内页模版友链想双列来着后来发现不合标签W3C,纠结了一段时间还是作罢

  • yesadmin

    Replied on: 2010 年 08 月 22 日, 17:58

    你也可以试试@七七

  • 七七

    Replied on: 2010 年 08 月 22 日, 16:31

    嗯,真的不错,一目了然!

  • YEE

    Replied on: 2010 年 08 月 22 日, 16:09

    这个好,收藏了 :smile:

  • yesadmin

    Replied on: 2010 年 08 月 22 日, 16:00

    我就是喜欢懒方法@ifenwen

  • ifenwen

    Replied on: 2010 年 08 月 22 日, 15:47

    这个确实不错啊 收藏先 比我那个手动列表显示方便多了

  • yesadmin

    Replied on: 2010 年 08 月 22 日, 15:14

    折腾无罪@Jeff

  • yesadmin

    Replied on: 2010 年 08 月 22 日, 15:13

    这也这么认为,嘿嘿@游子网络

  • Jeff

    Replied on: 2010 年 08 月 22 日, 11:49

    额,我用的插件。

  • 游子网络

    Replied on: 2010 年 08 月 22 日, 10:21

    这种效果不错的,看起来整齐不拥挤!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

无觅相关文章插件,快速提升流量

.