[OVERFLOW：HIDDEN]的替代方法 [英] Alternative for [OVERFLOW:HIDDEN]

问题描述

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

请看看我的小提琴。并尝试将

  overflow：hidden; 
  

in

 ＃nav-holder {
 background：＃333333; 
 padding-left：30px; 
 padding-right：30px; 
} 
  

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

您会注意到，在包含 overflow：hidden 在CSS中，导航菜单（悬停）不会显示。

我该如何解决这个问题？

解决方案

您需要 display：inline-block 并将设置为至 100％
$ b 嵌入块
$ b

元素生成一个块元素框，它将与
周围的内容一起流动，就好像它是一个单行内嵌框（行为
就像替换元素一样）



更改

pre $ ＃nav-holder {
background：＃333333;
padding-left：30px;
padding-right：30px;



至

 ＃nav-holder {
 background：＃333333; 
 padding-left：30px; 
 padding-right：30px; 
宽度：100％; 
明确：两者; 
 display：inline-block; 
} 
  

Jsfiddle demo

然后您可能需要添加 * {box-sizing：border-box } 在顶部pf you css

全面演示

阅读更多关于 box-sizing here

奖金

I am currently working in our system and I find it difficult to use overflow in my HTML.

Please take a look at my fiddle. and try to put

overflow:hidden;

in

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

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

You will notice that, after including overflow:hidden in the css, the navigation menu(hover) doesn't display.

How can I fix that?

解决方案

You will need display: inline-block and set the with to 100%

inline-block

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

Change

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

to

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

Jsfiddle demo

You then may want to add *{box-sizing: border-box} at the top pf you css

Full demo

Read more about box-sizing here

bonus

这篇关于[OVERFLOW：HIDDEN]的替代方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！