wordpress如何实现友情链接两列显示

如果友情链接位于侧栏,我个人更偏向于两列显示。这样可以让宽度稍稍较大侧栏显得比较充实。

那么实现两列先是其实也是非常简单的。首先你要知道你的侧栏宽度是多少。最好还要知道他的padding(侧栏内容距侧栏边框的距离)值是多少,如果你不喜欢打开主题的style文件去看那些繁杂的代码,你可以用Firefox的Firebug或者用Chrome浏览器,在侧栏内单击鼠标右键选择“审查元素”。目前国产的很多浏览器都内置WebKit内核,所以基本上也都可以实现Chrome的“审查元素”。

知道这些值的目的是能够让你确定将友情链接分成两列后每一列的宽度是多少。

加入你的侧栏宽度为280px,padding值为0。那么你就可以将每一列的宽度设为140px。然后在你的主题style.css文件中加入下列代码:

.blogroll{width:280px;/*减去padding值以后的侧栏宽度,如果你的主题侧栏padding值为0,此值即为侧栏宽度*/display:block;overflow:auto;/*这句可以兼容IE6,如果你想kill IE6,那就不要加这句*/}.blogroll li{float:left;width:140px;/*每列宽度*/display:block;}

 

简单说两列显示就是将文字从上向下排列改成了从左向右排列。

举例:

单列:

1

2

3

4

两列:

1 2

3 4

发表评论

12 条回应

  1. Aic说道:

    有点看不懂,li左浮点而已,怎么会有两列的效果呢?楼主试过吗?

  2. 番茄说道:

    不知道为什么添加到我的博客就不成功呢。

    1. 小雨说道:

      你现在就是两列显示呀,难道成功了?

      1. 番茄说道:

        我是安装的一款插件才让友链两栏显示的。

  3. mango说道:

    还是firefox的审查元素好用

    1. 小雨说道:

      嗯,firebug一直很强大!

  4. 象牙塔说道:

    这个可以有~

    1. 小雨说道:

      必须的!

  5. 那不是我说道:

    兼容那句不好记

    1. 小雨说道:

      可以不要的,主流浏览器上不会受影响。

  6. 篮球比分说道:

    这个要有的

    1. 小雨说道:

      不仅用在友链上,还可以用在别的地方。