CSS 页脚在每个维度上都无法正常工作

Question

我正在尝试创建响应式页脚。到目前为止我遇到的唯一问题是，在不同的屏幕尺寸下，页脚背景颜色会消失。在较小的屏幕上，页脚背景颜色显示正确，在大屏幕上它只显示 50 像素。

这是 jsfiddle:http://jsfiddle.net/22Quu/

这里有两张图片可以说明我在说什么。

第一张图片是它在较小屏幕上的外观以及它应该始终呈现的外观。如您所见，背景颜色适合每个元素。

第二张图片显示在更大的屏幕上。

如您所见，页脚的背景颜色不适合整个对象。起初，我认为问题可能与 media screen 有某种关系，但事实并非如此。

顺便说一句，我正在改编这个原始页脚 http://www.script-tutorials.com/demos/374/

Answer 1

因为你给了float: left至 <li>您需要清除它或添加 overflow: hidden至 ._footer > ul

    <footer class="_footer">    
    <ul>
<li><!--your content--></li>
<li><!--your content--></li>
<li><!--your content--></li>
<li class="clear" ></li>
    </ul>
    </footer>

清晰类的 CSS

._footer > ul li.clear {
float:none;
clear: both;
width: auto;
padding: 0;
}