关于网页页头的“设为首页”和“联系我们”位置互换问题

在进行对网页的布局时，页头的存在于大部分网页而言都是必不可少的，且一般而言，都会有“设为首页”，“加入收藏”，“联系我们”等三个链接。当然，页头的链接部分并不局限于这些文字，在这里我仅仅是举个例子，作为参考。

当编写要实现这部分功能的代码时，众所周知，用HTML及CSS实现,它的一般代码形式如下:(这里只写出HTML及CSS部分)

<div class="top">

<ul>

<li><a href="#">设为首页</a></li>

<li><a href="#">加入收藏</a></li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

CSS部分:

*{

margin:0;

padding:0;

}

.top{
width:100%;
background:#999999;
height:30px;
}

.top ul{
float:right;
list-style:none;

}


.top ul li{
float:right;
margin-right:25px;
}


这样写出的代码也可以实现我们所要的效果,它的效果图如下:



不难看出，它的“设为首页”和“联系我们”位置互换了，这是因为float:right,向右浮动的缘故，这时需要将它们互换位置，也就是HTML部分的代码改成以下形式：

<li><a href="#">联系我们</a></li>

<li><a href="#">加入收藏</a></li>

<li><a href="#">设为首页</a></li>

但是这样的方法在进行页面维护或是要进行修改的时候，并不是很方便，所以这里介绍另外的一种方法：

CSS部分改为如下：

*{

margin:0;

padding:0;

}

.top{
width:100%;
background:#999999;
height:30px;
}

.top ul{
float:right;
list-style:none;

}


.top ul li{
display:inline-block;
line-height:30px;
margin-right:25px;
}

效果图如下：