侧边栏的分类目录默认为单列显示,看着就那光溜溜的几个小字就占那么长的宽度,实在太浪费:),至少也得改成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;”,不过相对来说前者代码更简洁一点。
我按照你说的操作,还是不成功,不知道哪里出错了。
可能是你的主题里使用不同的样式名称.
OK 呵呵 回头就给加上 现在在调插件的问题- – 很郁闷
什么插件?
我喜欢无插件,嘿嘿!毕竟不是自己写的东西,一出问题调试起来很麻烦!
博客很cool哦,有没有兴趣交换一下链接呢? 我的blog也是做设计方面的内容,如果有兴趣的话可以来看看 BLUETEMPT.COM
哈哈。。刚刚也去你博客。
发了个留言想跟你交换链接,没想到你也在这留言了。。。
PS:已链接!