如果設備寬度小於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 -> Element
li
標記沒有hide-small
類。 它提出的li
像這樣沒有任何等級:
<li><a href="#">About us</a></li>
我怎樣才能解決這個問題?
使用瀏覽器的元素督察看看這個規則是否適用,以及是否有其他規則會覆蓋它。你確定CSS文件包含在頁面中嗎? –
另外,我會在'max-width:'和'480px'之間加一個空格,以確保CSS解析有時可能很有趣 –
也許您正在測試寬度> 480px的設備 – Danield