替代[OVERFLOW：HIDDEN]

Question

我目前正在使用我们的系统，我发现很难在HTML中使用溢出。

请看看我的小提琴。并试着把

overflow:hidden;

在

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

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

您会注意到，在css中包含overflow:hidden后，导航菜单（悬停）无法显示。

我该如何解决？

Answer 1

您需要display: 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 demo

然后，您可能想要在{cp

>的顶部添加*{box-sizing: border-box}

Full demo

详细了解box-sizing here

bonus