Question

如果设备宽度小于480px，我将不会显示链接。为此，我使用了以下CSS：

@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类没有隐藏链接。我确信在html页面上加载了受尊重的css文件。但是当我转到inspect -> Element时，li标记没有hide-small类。它提供了li这样没有任何类：

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

我该如何解决？

Answer 1

可能其他一些css属性正在覆盖你的课程。尝试使用：

强制它

display: none !important;

Answer 2

有效！ ..

http://hpics.li/b181647 和 http://hpics.li/5ea4dc0

仅当宽度为480px或

时，显示才会亮起

你可以用这个来测试宽度：

<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>

CSS - 显示：none不起作用

2 个答案: