2016-07-17 210 views
1

如果設備寬度小於480px,我將不顯示鏈接。要做到這一點,我已經使用了下面的CSS:CSS - display:none does not work

@media screen and (max-width:480px){ 
    .container{ 
     padding-left: 20px; 
     padding-right: 20px; 
    } 
    .content-area{ 
     padding-top: 20px; 
    } 
    .hide-small{ 
     display: none; 
    } 

} 

的HTML是:

<nav class="Nav-bar"> 
     <ul class="Group"> 

       <li ><a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li class="hide-small"><a href="#">About us</a></li> 
       <li><a href="#">Contact us</a></li> 
     </ul> 
</nav> 

問題是hide-small類不隱藏鏈接。 我相信尊重的CSS文件加載在HTML頁面上。但是當我去inspect -> Elementli標記沒有hide-small類。 它提出的li像這樣沒有任何等級:

<li><a href="#">About us</a></li> 

我怎樣才能解決這個問題?

+1

使用瀏覽器的元素督察看看這個規則是否適用,以及是否有其他規則會覆蓋它。你確定CSS文件包含在頁面中嗎? –

+0

另外,我會在'max-width:'和'480px'之間加一個空格,以確保CSS解析有時可能很有趣 –

+0

也許您正在測試寬度> 480px的設備 – Danield

回答

0

它的工作原理! ..

http://hpics.li/b181647http://hpics.li/5ea4dc0

顯示效果上,只有當寬度爲480像素或下

您可以測試這個寬度:

<script> 
     function getWidth() { 
      if (self.innerHeight) { 
      return self.innerWidth; 
      } 

      if (document.documentElement && document.documentElement.clientWidth) { 
      return document.documentElement.clientWidth; 
      } 

      if (document.body) { 
      return document.body.clientWidth; 
      } 
     } 

     alert(getWidth()); 
    </script> 
2

也許一些其他的CSS屬性會覆蓋你的類。嘗試強制使用:

display: none !important;