1

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

4

1 回答 1

1

我不是 100% 确定,你所说的“溢出”是指什么,但如果你浮动列表项,你很可能希望在你的 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 选择器的高特异性,请参阅 fe http://csswizardry.com/2011/09/when-using-ids-can-be -课堂上的痛苦/

于 2013-02-19T23:46:09.187 回答