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

我有一个简单的无序列表旁边两个其他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>

来源

2016-05-20 pdlw

你不能用'内联block'和'float'在同一时间......选择一个或其他...不是两个。 –

明白了。删除花车，并与显示：行内块。 – pdlw

如果去除.header设定高度，使其inline-block，你会看到在您的锚的边界仍然包含在他们的父母。

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

https://jsfiddle.net/q5mxbywp/

来源

2016-05-20 04:11:21

这绝对可以解决问题，但删除标题上的高度可以消除浮动到左侧的橙色部分，并且锚点看起来不像是垂直居中 - 它们看起来更接近底部，即使没有填充。 – pdlw

通过将所有东西放置在高度上：100％（这是出于某种原因起作用）来修正橙色div，但锚点未被垂直对齐仍困扰着我：https://jsfiddle.net/q5mxbywp/6/ – pdlw

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

回答

相关问题