css样式之inline-block元素

网站建设知识 phpacg 2年前 (2018-04-24) 145次浏览 0个评论

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

css样式之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元素发生的多余空白间隙,正好招致超出了外部容器的宽度。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址