随着友情链接的不断增加,友情链接栏越来越长,看着始终不舒服,于是动手改成多栏分列(暂时改为两栏吧)显示.之前已经修改过分类目录为多栏显示,所以这次不加思索的按上次的方法,查看发布后源文件,发现友情链接用到的类名是xoxo blogroll(好奇怪的类名,还xoxo………- -!!),在style.css搜索该类名未果,老办法,直接新增样式.

.xoxo blogroll{
width:210px;
display:block;
}
.xoxo blogroll li{
float:left;
width:100px;
display:block;
}

OK,上传,发现友情链接还是单栏(列),貌似CSS没应用到,难道类名没写对?

查阅了相关资料才明白,原来问题就出在xoxo上,xoxo的全名是eXtensible Open XHTML Outlines,即拓展型开放XHTML规范的简称.用于模块化XHTML的形式定义了模块框架和各种模块。制定XOXO文档类型的目的就是提供XHTML友好的规范，以便于XML引擎处理和浏览器简单的互操作。

既然这样,那么把在类名中把xoxo移除就OK啦.

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

注:如果想分成N列,就把li标签的宽度改成其父级标签的宽度除以N,即如果你的友情链接栏宽度是200,你如果想改成两栏显示,那么li的宽度就是100,但建议还是把这个值稍微改小一点如95,因为在不同浏览器下如果用了mergin的话,会不些小小的误差.

如果还不明白,可以查看相关文章:改变分类目录样式为多列显示

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