CSS 小问题请教

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1932 天前的主题，其中的信息可能已经有所发展或是发生改变。

源代码链接：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 保持不变，为啥上下边框重合了？（高度丢失？）

7 条回复 • 2019-08-09 11:16:23 +08:00

ashong

2019-08-09 10:03:01 +08:00

li a 是 float，高度不计入

sanmaozhao

2019-08-09 10:09:53 +08:00

display block 的时候，比较好理解，因为子元素浮动了，所以脱离了常规文档流，导致容器高度为 0，上下边框自然就重合了。

display inline-block 的时候，行为有点怪异，看上去有了清除浮动的效果。
和块格式化上下文（ BFC ）有关，以下文章有说明：
https://juejin.im/post/59e7190bf265da4307025d91#heading-5

sugars

2019-08-09 10:18:51 +08:00

你也可以不改成 block，加个 overflow:hidden;试试

lathlaeril

2019-08-09 10:51:49 +08:00

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 有点旧了。

chuzhuangtai

2019-08-09 10:59:19 +08:00

li 标签是浮动的，没有高度，给父元素清除浮动，或者给 li 标签 display:inline-block ；即可

Zink99

2019-08-09 11:11:31 +08:00

a 标签脱离文档流，父元素计算高度时不计算 a 标签高度。
解决方案：清除浮动（楼上已给出

Counter

2019-08-09 11:16:23 +08:00

@sanmaozhao
@lathlaeril

理解了，谢谢，解决方式很有意思