南京网站制作公司

当前位置: 网站首页 - 新闻动态 - 安优观点 -

无序列表li横向排列

发布时间:2024-09-05

来源:

一、横向两列方式排列:

在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得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:

结果为:

 

 

策略思维与细节的完美结合,有效帮您减少试错成本

策略思维与细节的完美结合,有效帮您减少试错成本

立即与安优联系,开启网站设计全新体验

立即与安优联系,开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

在线咨询

在线咨询

拨打电话

返回顶部

品质设计 用心服务

  • 12年+定制经验

  • 600+客户选择

  • 高效售后保障

7*24小时服务热线