Question

我想在常规页面导航中隐藏的移动菜单中显示链接。我删除了“主页”导航链接

<li id="home-menu"><a href="./index.html">HOME</a> </li>

在styles.css第60行的常规网页视图中，使用display：none的替代方法，在此处讨论：http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont。

#home-menu {
  position: absolute;                           
  overflow: hidden; 
  clip: rect(0 0 0 0);                         
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0;          
}

现在，我想启用移动菜单列表中的“主页”链接。在styles.css的第176行，我试图显示#home-menu，

#home-menu {
display: inline-block;
}

但它不会显示在响应式菜单中。我真的想避免使用！重要。我很高兴学习如何解决这个问题。我的例子是http://nspowers.org/ask/display/

Answer 1

你剪裁它并且高度和宽度都是1px，所以你还需要覆盖这些属性：

#topnav nav ul li {
    float: none;
    margin: 0;
    clip: auto; //reset clip to not clip
    height: auto; //allow height to expand
    width: 100%; //matches rest of menu elements
    position: relative; //allow to flow above rest of elements instead of overlap first one
}

你也可以在第117行找到它，因为你正在使用的选择器的特殊性，它会覆盖你的display: inline-block。您可以在开发人员工具中看到这一点：

#topnav nav ul li {
    display: block;
    float: left;
    font-size: 1.7em;
    margin-right: 30px;
}

Answer 2

你在这里有很多事情，所以如果没有太多细节，我会建议一个更清洁的选择：

删除绝对定位及其相关规则，而最初使用display: none;隐藏#home-menu - 然后在移动广告点添加display: block;以重新显示：

header#topnav nav ul li#home-menu {
    display: none; /* Also remove the !important rule from here */
    /* position: absolute;                           
    overflow: hidden; 
    clip: rect(0 0 0 0);                         
    height: 1px; width: 1px; 
    margin: -1px; */
    padding: 0; border: 0; 
}

让小型设备重新显示 home ：

@media only screen and (max-width: 579px) {
   header#topnav nav ul li#home-menu {
       display: block; 
   }
}

这似乎是一个更简单，更易维护的解决方案，而且您不需要覆盖这么多规则。

^{如果您对其工作原理感到困惑，请阅读选择器的特异性 - 请参阅：http://www.w3.org/TR/css3-selectors/#specificity，http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/和https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity了解更多信息。}

显示常规导航菜单中未显示的响应式菜单链接

2 个答案: