替代[OVERFLOW:HIDDEN]

Question

我目前在我们的系统中工作,我发现很难在我的HTML中使用溢出.

请看看我的小提琴.并尝试把

overflow:hidden;

在

#nav-holder{
background: #333333;
padding-left: 30px;
padding-right: 30px;
}

http://jsfiddle.net/mjanthrax/L7vgnzvt/

您会注意到,在包含overflow:hidden在CSS中后,导航菜单(悬停)不会显示.

我该如何解决这个问题？

Answer 1

您将需要显示:inline-block并设置with为100%

内联块

该元素生成一个块元素框,该框元素框将与周围的内容一起流动,就好像它是一个单独的内联框(行为很像被替换的元素)

更改

#nav-holder{
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
}

至

#nav-holder {
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    clear: both;
    display: inline-block;
}

Jsfiddle演示

然后你可能想要*{box-sizing: border-box}在顶部添加你的css

完整演示

在这里阅读更多关于盒子大小的信息

奖金