我有一个由三篇文章组成的网站。我为响应式设计设置了几个媒体查询,但是当我调整大小时,文章的 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/ 如果没有所有必要的代码,很难重新创建它给出的效果,但我希望有人能在我的代码中的某个地方发现错误。