侧边栏的分类目录默认为单列显示,看着就那光溜溜的几个小字就占那么长的宽度,实在太浪费:),至少也得改成3列吧。OK,开始动手改造。。。
  实现多行效果并不难,只需要固定一个ul宽度,然后设置其子级li的宽度为它的一半,同理,如果想显示N列,那么li的宽度就是:ul的宽度/N,然后全部设置成float,再将li的display设置成block。代码实现如下:

<style type=”text/css”>  
    .boxui{ width:210px;}    
    .boxui ul{ width:210px;}    
    .boxui li{ width:70px; float:left; display:block;}    
</style>  
<div class=”boxui”>  
    <ul>  
        <li>盒子UI</li>  
        <li>盒子UI</li>  
        <li>盒子UI</li>   
    </ul>  
</div>

  上面只是一般的实现办法,至于WP具体的实现方法,也大同小异,只要稍微变通一下就行。OK,废话少说,进入正题。
  先查看侧边栏源文件,就一行代码:wp_list_categories(),看来不能直接在这里改了。没关系,随便发布一下页面,然后查看源文件,看到该部分的样式结构基本就是这样:
<li class=”categories”>
  <h2>分类目录</h2>
  <ul> 
    <li><a href=”#”>分类目录1</a> </li>
    <li><a href=”#”>分类目录2</a> </li>
  </ul>
</li>
在style文件里查找类名categories无果,没关系,新建一个又何妨,样式如下:
.categories ul{ 
 width:210px;
 display:block;
}
.categories ul li{ 
  float:left;
 width:70px;
 display:block;
}

  大功造成?等等,好像还忘记了一件事。对样式里用到了float,应该把它给clear了。虽然说IE7以上显示是问题的,但低级版本或其它版本就会出现错位。所以要养成一个习惯,用过float之后一定要clear。在侧边栏的分类目录后面加上一个br就行了<br clear=”all” />,这里的clear=”all”相当于style=”clear:both;”,不过相对来说前者代码更简洁一点。

做人要厚道,转载请注明文章来源: https://www.boxui.com/blog-history/223.html