源代码链接: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 2019-08-09 10:18:51 +08:00 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 |