V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Counter
V2EX  ›  问与答

CSS 小问题请教

  •  
  •   Counter · 2019-08-09 09:42:39 +08:00 · 1546 次点击
    这是一个创建于 1935 天前的主题,其中的信息可能已经有所发展或是发生改变。

    源代码链接: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
        1
    ashong  
       2019-08-09 10:03:01 +08:00   ❤️ 1
    li a 是 float, 高度不计入
    sanmaozhao
        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
    sugars
        3
    sugars  
       2019-08-09 10:18:51 +08:00   ❤️ 1
    你也可以不改成 block,加个 overflow:hidden;试试
    lathlaeril
        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 有点旧了。
    chuzhuangtai
        5
    chuzhuangtai  
       2019-08-09 10:59:19 +08:00   ❤️ 1
    li 标签是浮动的,没有高度,给父元素清除浮动,或者给 li 标签 display:inline-block ;即可
    Zink99
        6
    Zink99  
       2019-08-09 11:11:31 +08:00   ❤️ 1
    a 标签脱离文档流,父元素计算高度时不计算 a 标签高度。
    解决方案:清除浮动(楼上已给出
    Counter
        7
    Counter  
    OP
       2019-08-09 11:16:23 +08:00
    @sanmaozhao
    @lathlaeril

    理解了,谢谢,解决方式很有意思
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3285 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:46 · PVG 20:46 · LAX 04:46 · JFK 07:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.