響應式設計中的文章和無序列表溢出

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％肯定，你被「溢出」指的是，但如果你是浮動的列表項，你很有可能要包括你的UL A 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選擇器的高度特定性，請參閱fe http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/