html - 响应式设计中的文章和无序列表溢出

Question

我有一个包含三篇文章的网站。我为响应式设计设置了几个媒体查询，但是当我调整大小时，文章的 ul 和 li 元素似乎溢出了文章(在 iphone5 上测试过)。我可以通过将文章的高度设置为 200% 来解决这个问题，但如果可以的话，我想避免这种情况。文章和ul背后的CSS:

#about {
background-color: #ebebeb;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#about h1 {
text-align: center;
margin: 0;
padding-top: 3em;
}

#about ul {
display: block;
width: 100%;
margin: 5em auto;
list-style: none;
padding: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

#about ul  li {
width: 20%;
float: left;
vertical-align: top;
margin:0 6.6666665%;
font-size: .8em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

#about ul li img {
display: block;
margin-left: 2em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

这是一个 jsFiddle => http://jsfiddle.net/sKvqF/如果没有所有必要的代码，很难重现它所提供的效果，但我希望有人能在我的代码中的某处发现错误。

Answer 1

我不是 100% 确定“溢出”指的是什么，但是如果您 float 列表项，您很可能想在 ul 上包含一个 clearfix，例如:

#about ul:before, #about ul:after { content: ""; display: table; }
#about ul:after { clear: both; }  
#about ul { zoom: 1; }

参见 https://stackoverflow.com/a/6539954/1696030但也要注意你的 CSS 选择器的高特异性，参见 f.e. http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/