当我的网站迁移到移动设备时,我试图隐藏前两个列表项。我在每个想要隐藏的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;
}
}
答案 0 :(得分: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
}
}
答案 1 :(得分:0)
您的代码运行正常,请参阅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;
}
}