源代码链接：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 Aug 9, 2019  1
li a 是 float， 高度不计入
|
 |
2
sanmaozhao Aug 9, 2019 1
display block 的时候，比较好理解，因为子元素浮动了，所以脱离了常规文档流，导致容器高度为 0，上下边框自然就重合了。
display inline-block 的时候，行为有点怪异，看上去有了清除浮动的效果。 和块格式化上下文（ BFC ）有关，以下文章有说明： https://juejin.im/post/59e7190bf265da4307025d91#heading-5 |
 |
3
sugars PRO 1
你也可以不改成 block，加个 overflow:hidden;试试
|
 |
4
lathlaeril Aug 9, 2019 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 Aug 9, 2019 1
li 标签是浮动的，没有高度，给父元素清除浮动，或者给 li 标签 display:inline-block ；即可
|
 |
6
Zink99 Aug 9, 2019 1
a 标签脱离文档流，父元素计算高度时不计算 a 标签高度。
解决方案：清除浮动（楼上已给出 |
 |
7
Counter OP |
Select Language