CSS控制wordpress友情链接横向排列

今天在做友情链接的时候发现，随着数目的增多，在侧栏会显示长长的一列，如果侧栏宽度较宽，则会空出一大块，极不美观。wordpress系统默认情况下，对于分类、链接、存档、文章等信息都是竖向排列，经过本站试验，可以完美解决此问题，如本页最下面的链接所示，唯一要做的就是CSS如何写，才更美观些的问题。

一般来说，我们只是对下面几种需要实现横向排列：

• 页面<?php wp_list_pages(’title_li=<h2>Pages</h2>’); ?>
• 目录<?php wp_list_categories(’title_li=<h2>Categories</h2>’); ?>
• 存档<?php wp_get_archives(’type=monthly’); ?>
• 链接<?php wp_list_bookmarks(); ?>

上面这些PHP代码是wordpress系统固有的，我们只要加上CSS代码即可。

默认情况下，一个列表是垂直运行的，每个项目都在自己的行上。它也包含有一个图像，叫做一个bullet，在每一行的前面。在你的样式表上，我们需要给navmenu添加一个参考，第一步是要清除bullet,并且为整个列表，将我们的margin和padding设置为零。

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }

如果你保存并且上传了你的样式表，在你的网页浏览器上刷新测试页面，如果一切运行顺利的话，你可以看见你的列表现在既没有bullets也没有缩进。

现在，我们要添加方法，这个方法会将这个列表设置成一个横行。我们需要给列表项目添加一个样式参考。

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }

因为这些是链接，我们要花一些时间来整理好这些链接的外观。你可以做许多事来设计这个列表，但是现在，让我们给链接列表添加一些空格，这样它们不会拥挤在一起，然后去除默认链接下划线，而且当鼠标移向链接时，使链接改变颜色。

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

好的，我们不能反抗。让我们进一步地采取另一个措施，给我们新的横向菜单列表一些真正的jazz.看看你是否能说出做了什么来，改变了外观。

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
	padding: 5px 20px 5px 20px; color: blue;
	background: pink;}
#navmenu ul li a:hover {color: purple;
	background: yellow; }

将相应的CSS代码添加你的style.css文件中，然后编辑你的sidebar.php，将代码添加到相应位置即可，剩下的就是对CSS多次修改，以便与你的主题看起来一致。

本站是将链接以横向形式排在网站底部footer区域，这样的好处是可以节省版面空间又符合网页设计规律，重要的是不会再有长长的一列而导致的难堪问题。