wordpress免插件侧边栏两列分列显示通用代码

更换了主题,也许侧边栏并不理想,很希望侧边栏内容能两列显示,比如分类目录、存档页、页面、链接等,这不是难事,一段CSS代码就能搞定。

默认情况下,WP已经给相关的功能块定义了css名称,但没有定义样式。

友情链接:widget_links

分类目录:widget_categories

独立页面:widget_pages

等等,通过查看主题源代码我可以了解到这些固定的class名,下面只要添加相应的样式即可。

/* 分类显示两列*/
.widget_categories ul{
display:block;
overflow:hidden;
}
.widget_categories ul li{
width:79px;
float:left;
}
/* 分类显示两列*/

/* 页面显示两列*/

.widget_pages ul{
display:block;
overflow:hidden;
}
.widget_pages ul li{
width:79px;
float:left;
}
/* 页面显示两列*/
/* 链接显示两列*/
.widget_links ul{
display:block;
overflow:hidden;
}
.widget_links ul li{
width:79px;
float:left;
}
/* 链接显示两列*/

如果上面的没有效果,可以试试下面的代码,在主题文件夹里style.css文件中添加,就会成两列显示

此代码适用于用链接表,如果是在菜单里添加的自定义链接则没有用的。

.blogroll{
width:320px;
display:block;
/*记得清除浮动*/
overflow:auto;
/*兼容IE6*/
zoom:1;
}
.blogroll li{
float:left;
width:49%;
display:block;
}

第一个width:320px意思是友情链接栏的宽度,看各自主题修改合适的宽度。

第二个width:49%意思是分两列显示,每列占据49%宽度,如果改成25%,就变成四列显示了。

admin

大家好!欢迎光临我的个人博客,本博主要是学习和记录自己生活、学习中发生的点点滴滴的过程,很高兴可以把自己的废话和一点点的经验拿出来和网友分享,最大的愿望就是能构共同学习,共同进步。

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.