Question

我旁边有两个其他div，旁边有一个简单的无序列表，所有3个都包含在父容器中。这是它的样子：https://jsfiddle.net/f0bz4hc0/1/。如果你放大，你可以看到所有3个都有它们周围的边框，但是列表项和锚点周围的边框延伸到容器的底部边框之外，而另外两个div是紧密的。为什么会发生这种情况，如何修复它以便所有内容都在容器内？

    <!doctype html>
<html>
<head>
    <title>practice</title>
    <meta charset='utf-8' />
    <style type='text/css'>
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }
    .page{
        width:960px;
        height:300px;
        margin:0 auto;
        border:1px solid red;
    }
    .row{
        width:100%;
    }
    .header{
        background-color:black;
        height:40px;
    }
    .logo{
        background-color:orange;
        height:100%;
        width:40px;
        float:left;
        display: inline-block;
    }
    .home{
        display: inline-block;
        height:40px;
        width:40px;
        float:left;
        border:1px solid cyan;
    }
    .home img{
        width:100%;
        height:100%;
    }
    ul{
        float:left;
        height:100%;
    }
    ul li{
        display: inline-block;
        border:1px solid teal;
    }
    a{
        display: inline-block;
        color:white;
        height:40px;
        line-height: 40px;
        border:1px solid orange;
    }
    </style>
</head>
<body>
    <div class='page'>
        <div class='header row'>
            <div class='logo'></div>
            <div class='home'><img src='house.png' /></div>

            <ul>
                <li><a href="#">a</a></li>
                <li><a href="#">a</a></li>
                <li><a href="#">a</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

Answer 1

如果您移除.header上的设置高度并将其设为inline-block，则您会看到您的主页上的边框仍然包含在其父级中。

.header {
  /*height: 40px;*/
  background-color:black;
  display: inline-block;
}

https://jsfiddle.net/q5mxbywp/

无序列表项和锚边框溢出父容器

1 个答案: