Css显示没有工作 [英] Css display none not working

问题描述

  @media screen and（min-width：900px）and（max-width：1215px）{
 #menu {
 display：none; 
} 
} 
  

这不起作用，div仍然可见。但是，如果我将div更改为< div class =menu> 而不是< div id =menu> 和css：

  @media屏幕和（最小宽度：900px）和（最大宽度：1215px）{
 .menu {
 display：none; 
} 
} 
  

有效。这是为什么发生？

编辑

：

 元素{
 display：block; 
} 
 #listMenuTop {
 display：none; 
} 
 #listMenuTop {
 display：none; 
 margin-bottom：-14px; 
 margin-top：10px; 
} 
  

但都显示：没有交叉。显示：块在哪里？来自？

编辑2

我发现问题。一个js函数覆盖了css显示属性：

  document.getElementById（'listMenuTop'）。style.display ='block' ; 
  

我想要做的是在屏幕> = 900px时屏蔽#listMenuTop，当屏幕< 900px以便能够显示/隐藏＃按钮上的#list菜单顶部。问题是，当#listMenuTop显示在屏幕上时< 900px它不会隐藏，如果我调整屏幕大小超过900px，因为js函数总是覆盖显示属性。

解决方案

试试这个： $ b

  @media screen and（min-width：900px）and（max-width：1215px）{
 #menu {
 display：none！important; 
} 
} 
  

谢谢

@media screen and (min-width: 900px) and (max-width: 1215px) {
 #menu {
      display:none;
   }
}

This is not working, the div is still visible. However, if I change the div to <div class="menu"> instead of <div id="menu"> and the css :

@media screen and (min-width: 900px) and (max-width: 1215px) {
   .menu {
       display:none;
   }
}

it works. Why is this happening?

EDIT

This is what Inspector says:

element {
    display: block;
}
#listMenuTop {
    display: none;
}
#listMenuTop {
    display: none;
    margin-bottom: -14px;
    margin-top: 10px;
}

But both display:none are crossed. Where does the display: block; comes from ?

EDIT 2

I found the problem. A js function was overwriting the css display property:

document.getElementById('listMenuTop').style.display='block';

What I want to do is to hide #listMenuTop when screen >= 900px and when screen < 900px to be able to display/hide #listMenuTop from a button. The problem is that when #listMenuTop is displayed on a screen < 900px it doesn't hide if i resize screen to more than 900px, because that js function is always overwriting the display property.

解决方案

Try this instead:

@media screen and (min-width: 900px) and (max-width: 1215px) { 
    #menu {   
        display:none !important;
    }   
}

Thanks

这篇关于Css显示没有工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！