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

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

下面演示利用内边距实现错开重叠的效果:
在这里插入图片描述
在这里插入图片描述

注意要清除ul的浮动

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值