Counter
V2EX  ›  问与答

CSS 小问题请教

  •  
  •   Counter · Aug 9, 2019 · 2289 views
    This topic created in 2495 days ago, the information mentioned may be changed or developed.

    源代码链接: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 replies    2019-08-09 11:16:23 +08:00
    ashong
        1
    ashong  
       Aug 9, 2019   ❤️ 1
    li a 是 float, 高度不计入
    sanmaozhao
        2
    sanmaozhao  
       Aug 9, 2019   ❤️ 1
    display block 的时候,比较好理解,因为子元素浮动了,所以脱离了常规文档流,导致容器高度为 0,上下边框自然就重合了。

    display inline-block 的时候,行为有点怪异,看上去有了清除浮动的效果。
    和块格式化上下文( BFC )有关,以下文章有说明:
    https://juejin.im/post/59e7190bf265da4307025d91#heading-5
    sugars
        3
    sugars  
    PRO
       Aug 9, 2019   ❤️ 1
    你也可以不改成 block,加个 overflow:hidden;试试
    lathlaeril
        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 有点旧了。
    chuzhuangtai
        5
    chuzhuangtai  
       Aug 9, 2019   ❤️ 1
    li 标签是浮动的,没有高度,给父元素清除浮动,或者给 li 标签 display:inline-block ;即可
    Zink99
        6
    Zink99  
       Aug 9, 2019   ❤️ 1
    a 标签脱离文档流,父元素计算高度时不计算 a 标签高度。
    解决方案:清除浮动(楼上已给出
    Counter
        7
    Counter  
    OP
       Aug 9, 2019
    @sanmaozhao
    @lathlaeril

    理解了,谢谢,解决方式很有意思
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1164 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 56ms · UTC 18:28 · PVG 02:28 · LAX 11:28 · JFK 14:28
    ♥ Do have faith in what you're doing.