Question

我在HTML5页面的页脚中有两个导航栏列表，第一个列表有12个用于浏览网站的项目，第二个列表包含社交媒体链接和另外一个项目：

<nav id="footer_navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
    <li><a href="#">Thing 3</a></li>
    <li><a href="#">Thing 4</a></li>
    <li><a href="#">Thing 5</a></li>                    
    <li><a href="#">Thing 6</a></li>
    <li><a href="#">Thing 7</a></li>
    <li><a href="#">Thing 8</a></li>
    <li><a href="#">Thing 9</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>

  <ul>                  
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">YouTube</a></li>
    <li><a href="#">One Last Thing</a></li>
  </ul>
</nav>

这些列表的CSS：

#footer_navbar {
  margin:0;
  padding:0;
  list-style:none;
  text-align:center;
}

#footer_navbar ul li {
  display:inline;
}

#footer_navbar ul li a {
  margin:0 5px;
}

#footer_navbar ul:first-child {
  margin-bottom:10px;
}

最后一部分将两个列表分开，而不是在它们之间放置<br />标记。我在SO HERE上找到了相关信息。您注意到我从建议的代码中删除了>，因为我的列表没有嵌套。我得到了理想的结果，如果有理由我应该留在>，请告诉我。

一切正常，现在我想在我的CSS中使用媒体查询，以便上述菜单的变化类似于THIS ARTICLE ON RWD中显示的内容（差异是背景颜色，屏幕上的位置以及边距和填充）。

所以我将这个媒体查询添加到CSS文件中：

@media screen and (max-width: 480px) {

  #footer_navbar li {
    background:#222;
    display:block;
    margin:5px;
  }

  #footer_navbar a {
    display:block;
    padding:3px;
  }

}

当我调整浏览器窗口大小或在我的iPhone 4S上查看时，一切正常，除了background:#222;元素中没有显示<li>。我可以使用Firebug在CSS中看到它，但颜色没有显示。其他一切按计划工作，边距和填充都是正确的，链接显示为block，一切都很好。经过几个小时的搔抓，我还没弄清楚我错过了什么或做错了什么。

任何帮助都将被感激地收到并表示赞赏。

更新

可以看到此网站的示例HERE

Answer 1

你有一个CSS样式

.footer_navbar ul li {
  display:inline;
}

和媒体查询css

.footer_navbar li {
  background:#222;
  display:block;
  margin:5px;
}

将查询css更改为

.footer_navbar ul li {
  background:#222;
  display:block;
  margin:5px;
}

它会起作用。

display li的{{1}}属性未被应用，因为它正在从

获取财产

display:block

Answer 2

通过将ID与类交换，我得到了改为＃222的背景知识。您在整个标记中使用了ID，但尝试切换到类，直到您确实需要额外的特异性级别。如果这对您有用，请告诉我。

无序列表背景颜色在媒体查询中消失

2 个答案: