Question

我有一个标题，它是导航和徽标的父级。我已将父设置为溢出：隐藏，因此我可以在导航中添加margin-top以使其位于底部。但它也会剪辑徽标div。我试着按照这个问题...... Overriding overflow: hidden

所以试图将徽标设置为溢出：可见，但这也没有用。除了徽标不在父容器中之外，我不确定是否有任何其他解决方案。

这是我的代码

CSS：

.container {
width: 960px;
margin:0 auto;
background-color: blue;
}

header {
height: 100px;
background-color: #001D5D;
position: relative;
overflow: hidden;

}

#logo {
height:100px;
width:100px;
z-index:10;
top:0px;
position: absolute;
overflow: visible;
}

nav {
    background-color:#1CCEAE;
    margin-top:63px; 
}

nav ul {
width:100%;
line-height: 37px;
    text-align:right;
    background-color:#1CCEAE; 

 }

ul li {
display: inline-block;
margin-right: 20px;
}

ul li a {
text-decoration: none;
font-size: 1em;
color:white;    
}

这是一个小提琴 http://jsfiddle.net/XS3Zs/

Answer 1

将width:100%移至ul或将padding重置为0至ul。

<ul>并不真正需要width:100%;，因为它是block元素，它将使用所有width可用的。，宽度设置为100％可能是太多了。不会估算边框，边距和填充。

Answer 2

UL元素默认为padding-left:40px;，因此如果将其设置为0，则可以正常运行。

我更新了您的[FIDDLE]

覆盖父溢出：隐藏子溢出：可见

2 个答案: