Question

当我的网站迁移到移动设备时，我试图隐藏前两个列表项。我在每个想要隐藏的li上添加了一个类，然后尝试媒体查询并在css中不显示任何内容。然而它似乎没有工作。这是我的代码

<ul class="home-btns btns-3 center">
    <li class="hide-mobile">
        <a href="/why-attend/"><span class="welcome-robot center"><img src="<?php bloginfo('template_directory'); ?>/assets/images/robot-icon-welcome.png" alt="Robot Icon" /></span> <span class="btn-text">Why Attend?</span></a>
    </li>
    <li class="hide-mobile">
        <a href="/agenda/"><span class="fa fa-group center"></span> <span class="btn-text">Agenda</span></a>
    </li>
    <li>
        <a href="/#pass-section"><span class="fa fa-ticket center"></span> <span class="btn-text">Register Now</span></a>
    </li>
</ul>

@media screen and (max-width: 667px) {
     .hide-mobile {
        display:none;
    }
}

Answer 1

如果没有看到更宽泛的代码来检查它是否全部按顺序（视口元标记等），很难说它会是什么。

为什么不尝试使用nth-child选择器来实现更加程序化的方法，而不是将自定义类分配给前2个li：

@media (max-width: 667px) {
  ul.home-btns li:nth-child(1), ul.home-btns li:nth-child(2) {
    display: none
  }
}

Answer 2

您的代码运行正常，请参阅http://codepen.io/nicholasabrams/pen/YyOerE。调整预览窗口的大小并观察LI消失

     <ul class="home-btns btns-3 center">
                <li class="hide-mobile">
                    <a href="/why-attend/"><span class="welcome-robot center"><img src="<?php bloginfo('template_directory'); ?>/assets/images/robot-icon-welcome.png" alt="Robot Icon" /></span> <span class="btn-text">Why Attend?</span></a>
                </li>
                <li class="hide-mobile">
                    <a href="/agenda/"><span class="fa fa-group center"></span> <span class="btn-text">Agenda</span></a>
                </li>
                <li>
                    <a href="/#pass-section"><span class="fa fa-ticket center"></span> <span class="btn-text">Register Now</span></a>
                </li>
            </ul>

@media screen and (max-width: 667px) {
     .hide-mobile {
    display:none;
  }
}

隐藏2 li在手机上的ul

2 个答案: