H5前端关于同行排列的常用方法

it2022-05-06  18

要在同一行排列显示的元素: 可以分为两部分,第一部分可以将其设置为左浮动,这个时候不占整个容器的空间,第二部分的元素如果也需要从左边紧接着排列的话,会出现重叠,有部分显示不出来的结果,解决这个问题,我们可以设置第二部分的内边距padding,让它的宽度大于或者等于第一部分浮动元素的宽度,这样将会达到错开的结果或者我们可以在第一部分设置清除浮动(overflow:hidden)。演示代码如下: 大的div块定义class为hang ,h2为第一部分,设置的为左浮动,并且清除浮动已达到和第二部分错开的效果 第二部分无序列表对里边li进行样式定义,可以设置宽度,正常都不建议设置高度,由里边的内容高度撑开,将它因为设置为左浮动,我们验证一下效果,可以看到,完美的错开。

下面演示利用内边距实现错开重叠的效果:

注意要清除ul的浮动


最新回复(0)