一、横向两列方式排列:
在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得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:
结果为:
电话咨询
在线咨询
微信咨询