无序列表li横向排列

一、横向两列方式排列：

在网页中，很多地方都会用到无序列表横向排列的形式，通常的写法都是使得li的css样式设置为:float：left的形式即可，li会依次从最左边开始并列对齐，

例如：

HTML中：

CSS:

显示结果：

但是在有些情况下需要列表以两列的形式分开并列一行，

此时，可以有以下两种方式来布局：

方法一：

当设置li的属性为：display:inline-block时:

方法二：

利用id增加权重使想要浮动在右边的li有float：right属性;

最后，需要注意的是，在浮动的时候，最后的结果与正常部分两列的情况下的顺序有所不同，例如

上面的结果正常是：“首页”到“需求大厅”依次排列，但是在浮动之后却变成了“服务大厅”是最后一

个，是因为在“服务大厅”右浮动时，它已经将区域最右侧占据，当下一个元素“需求大厅”再右浮动时，

由于最右侧已经被签一个占据，所以它只有在签一个元素的左侧，因此，顺序会是倒序的。就是说如

果用left对ABCDE排列，那么用right之后结果就会变成：EDCBA。

 

 

 二、在固定宽度下有间隔的排列

       在外围区域宽度固定的情况下，要想使ul中的li内容有一定间隔的横向排列，只要不设置在x方向上

的overflow:hidden;而整个ul为：margin-right:-12px（12随内容而定），如下：

HTML中：

CSS:

结果为：