[OVERFLOW:HIDDEN]的替代方案

Question

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

请查看我的fiddle，并尝试放置

overflow:hidden;

在

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

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

您会发现，在CSS中包含overflow:hidden后，导航菜单（悬停）不会显示。

我该如何解决？

- Ellis

Answer 1

您需要使用 display: inline-block 并将 width 设置为 100%

inline-block

该元素生成一个块级盒子，其将像单个内联框一样随周围内容流动（类似于替换元素的行为）

更改

#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演示

然后您可能希望在CSS顶部添加* {box-sizing: border-box}

完整演示

了解更多关于box-sizing的知识，请点击此处

奖励

- Gildas.Tambo

---

@Ellis 你在说什么？ :-) box-sizing？那请先阅读参考文献。 - Gildas.Tambo