这是一个创建于 2266 天前的主题，其中的信息可能已经有所发展或是发生改变。
源代码链接：www.runoob.com/try/try.php?filename=trycss_ex_pagination
修改 ul.pagination
ul.pagination { display: inline-block; padding: 0; margin: 0; } 改成这样
ul.pagination { display: block; border:1px solid red; padding: 0; margin: 0; } ul 从 inline-block 改成 block 显示，其它 style 保持不变，为啥上下边框重合了？（高度丢失？）
 | 1 ashong 2019-08-09 10:03:01 +08:00  1 li a 是 float， 高度不计入 |
 | 2 sanmaozhao 2019-08-09 10:09:53 +08:00 1 display block 的时候，比较好理解，因为子元素浮动了，所以脱离了常规文档流，导致容器高度为 0，上下边框自然就重合了。 display inline-block 的时候，行为有点怪异，看上去有了清除浮动的效果。 和块格式化上下文（ BFC ）有关，以下文章有说明： https://juejin.im/post/59e7190bf265da4307025d91#heading-5 |
 | 3 sugars PRO 1 你也可以不改成 block，加个 overflow:hidden;试试 |
 | 4 lathlaeril 2019-08-09 10:51:49 +08:00 1 li 是浮动的，所以其父元素需要 clearfix，不然会失去高度。 ul.pagination { display: block; padding: 0; margin: 0; border: 1px solid red; overflow: auto; // clearfix } 或者 ul.pagination { display: block; padding: 0; margin: 0; border: 1px solid red; } // clearfix ul.pagination::after { content: ""; clear: both; display: table; } 看你喜欢哪一种 clearfix 的方法了。 但是还是推荐用 flexbox 来解决，float+clearfix 有点旧了。 |
 | 5 chuzhuangtai 2019-08-09 10:59:19 +08:00 1 li 标签是浮动的，没有高度，给父元素清除浮动，或者给 li 标签 display:inline-block ；即可 |
 | 6 Zink99 2019-08-09 11:11:31 +08:00 1 a 标签脱离文档流，父元素计算高度时不计算 a 标签高度。 解决方案：清除浮动（楼上已给出 |
 | 7 Counter OP |
Select Language