在手机上隐藏2个李的内容

我试图隐藏前两个列表项，当我的网站下降到手机。我在每个li上添加了一个类，我想要隐藏，然后尝试媒体查询并在CSS中不显示任何内容。但它似乎没有工作。这里是我的代码在手机上隐藏2个李的内容

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

来源

2015-11-05 pocockn

假设你已经配置的中继检视，以正确的顺序mediaqueries和CSS出这个HTML块的，也许你的问题是，你的设备比667大像素宽度。 –

某些移动设备的屏幕宽度超过667像素 – dsh

我怀疑您遇到特定问题。你有没有其他的CSS可以应用于这些li？你可以使用铬检查器来调整视口宽度到这个断点，看看什么样的css被应用到li的？ – quoo

很难说如果没有看到你的更广泛的代码来检查它的一切顺序（视口元标记等），它可能是什么。

而是前2里的，你为什么不尝试使用第n个孩子选择一个更编程方法分配的定制类：

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

来源

2015-11-05 15:34:10

这是一个很好的观点，但是...这不是问题... –

是的，但是我不能评论这个问题而没有看到所有的难题。以为我会在过渡期间诚意提供小费:-) –

完美工作 – pocockn

您的代码工作正常，看http://codepen.io/nicholasabrams/pen/YyOerE。调整预览窗口，看你的LIS消失

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

来源

2015-11-05 15:36:51

在手机上隐藏2个李的内容

回答

相关问题