服务与支持 |咨询热线 0931-8733767
  • 金城在线
  • 公司简介
  • 发展历程
  • 企业文化
  • 售后服务
  • 工作机会
  • 联系我们

css样式之inline-block元素

来源:发布时间:2018-2-8 10:43:40

如下图,为什么和设为inline-block元素平级的浮动元素会掉下来?


这个问题其实是这样的,题主没有表述清楚:

第一张图,div.float在右边,是因为你的ul没有清除内部li浮动的影响,ul本身的高度没有撑开,所以,虽然ul的宽度是占整行的,但是高度为0,这时候div.float会按照ul的高度为顶部对齐向左浮动,被浮动的li元素卡住了位置,所以显示在右侧, 你可以给ul手动设定一个高度(比如20px),可以更清晰的看清状态,这是正常的情况


设置ul为inline-block以后,ul本身变成了一个行内块,不再占据整行,高度也撑开了,而且因为ul不是浮动元素,所以div.float会浮动到ul左侧,这也是正常的情况


至于你说的给ul设置了inline-block以后,div.float会掉下来,一般情况下是不会出现这种状况的,除非是外部容器整体宽度不够,浮动元素会换行排列,那么为什么没设置inline-block的时候宽度是够的呢? 可能是因为inline-block元素产生的多余空白间隙,正好导致超出了外部容器的宽度。


相关文章
  • 预约专家

    为您提供一对一解决方案
    立即预约
  • 售前咨询

    周一至周五9:00——17:30
    立即咨询
  • 联系方式

    13919049954

    全国7×24小时热线服务
  • 免费报价

    专属专业顾问1对1报价
    免费报价