实现列表等距的方法

66 阅读1分钟

方法

需要注意的是,space-between的方法是自适应分配空隙,而不是撑开,也就是说父容器的大小应该是确定的,而不是由子元素撑开,因此这种方法一般来说不使用,用另外两种方式。

疑惑的情况

掘金网页端,这个搜索建议,你可以看到,父容器的display为block,而子元素又没有margin。
看上去不符合任何一个方法。
image.png

image.png

结论就是内部元素里面有margin,而列表元素本身不是BFC元素,导致产生了margin折叠问题,也就是内部的margin影响到了外部,设置overflow: hidden触发BFC就会发现列表元素变高了。