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

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

它会起作用。

li 的 display 属性，即 display:block 未应用，因为它从

获取属性

.footer_navbar ul li {
  display:inline;
}