Warning: Declaration of c2c_ConfigureSMTP::options_page_description() should be compatible with C2C_Plugin_023::options_page_description($localized_heading_text = '') in /home/mslandymdsol1agnid/wwwroot/wp-content/plugins/configure-smtp/configure-smtp.php on line 47 利用CSS实现wordpress侧边栏分类目录分两列显示 | 迷失的世界
当前位置： 首页 > 网站相关 > 正文

利用CSS实现wordpress侧边栏分类目录分两列显示

Jun052012
作者：Zero   发布：2012-06-05 23:52   分类：网站相关   阅读：16,645次   17条评论  

细心的童鞋或许已经发现了我的博客侧边栏的那个分类目录已经由原来的一栏显示变成分两栏显示了，这个主要是根据你自己博客的需要去修改的，如果你希望实现，可以有很多功能强大的插件去实现分类目录分两栏显示，但是今天偶告诉你的是一个非常简单的实现方法，用CSS实现。利用CSS标签ul和li的宽度去实现，控制ul宽度=li宽度x2。

修改方法

1、CSS部分

.sidebar-categories li{
width:130px;
float:left;
}
.sidebar-categories ul{
width:260px;
display:block;
overflow:auto;
}

注：宽度根据你个人的需要去进行调整。总之控制好ul宽度=li宽度的两倍

2、php 文件修改部分

<div class="widget"><h3>分类目录</h3>
<div class="sidebar-categories">
<div class="sidebar-categories li">
<ul>
<?php wp_list_categories('orderby=name&show_count=1&title_li='); ?>
</ul>
</div>
</div>
</div>

这部分就在你侧边栏需要显示分类的地方贴上，wp_list_categories的属性可以自行调整。IE6下的兼容性也被我解决掉了！

轻轻感叹一下：强大的CSS！



分享到：

本文固定链接: http://www.msland.cn/css-wordpress-fenlei.html | 迷失的世界

该日志由 Zero 于2012年06月05日发表在 网站相关 分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 利用CSS实现wordpress侧边栏分类目录分两列显示 | 迷失的世界
关键字: , ,
【上一篇】
【下一篇】

您可能还会对这些文章感兴趣！

利用CSS实现wordpress侧边栏分类目录分两列显示：目前有17 条留言

  1. 8楼
    轻英语 Google Chrome Windows :

    非常好的博客

    2013-10-12 下午 10:21
  2. 7楼
    walakaka Google Chrome Windows :

    请问我在后台CSS样式表中找不到关于categories的内容，我是想改分类侧边栏内，各个分类名称的字体跟颜色。为啥没有categories呢，啥都有，就分类没有

    2013-06-08 上午 2:34
    • Zero Google Chrome Windows :

      不可能的，你是不是找错文件了啊！~

      2013-06-09 下午 6:35
  3. 6楼
    开心就好 Internet Explorer Windows :

    我试了下，不行，别的地方好像也有这么写的

    2012-08-25 下午 10:16
    • Zero 360 Browser Windows :

      肿么会不行。我自己测试的没有问题啊！~

      2012-08-27 下午 9:08
  4. 5楼
    番茄 Mozilla Firefox Windows :

    没能修改成功。

    2012-07-04 上午 12:56
    • Zero Safari iPhone :

      怎么会呢？？你是按照教程来的么？

      2012-07-05 上午 1:07
  5. 4楼
    泪雪 Internet Explorer Windows :

    原来是这样

    2012-06-28 下午 2:51
  6. 地板
    雷东升 360 Browser Windows :

    两列挺好，一列实在是太浪费空间了，当初我不知道怎么弄，直接让那个模块在首页不显示了

    2012-06-12 下午 1:02
    • zero SouGou Browser Windows :

      是的，呵呵！~挺好的一个功能！

      2012-06-12 下午 9:43
  7. 板凳
    艾丽素 SouGou Browser Windows :

    代码代码·头疼的代码啊··

    2012-06-08 下午 1:25
    • zero Google Chrome Windows :

      这个代码已经是很简单的拉~~~就一个CSS~~~

      2012-06-08 下午 8:45
  8. 沙发
    andychow1989 360 Browser Windows :

    额 貌似直接li用50%来的更舒服点

    2012-06-07 上午 12:19

发表评论

您必须 [ 登录 ] 才能发表留言！