Question

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

#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 =＆gt; http://jsfiddle.net/sKvqF/ 如果没有所有必要的代码，很难重新创建它所给出的效果，但我希望有人能在某处找到我的代码中的错误。

Answer 1

我不是百分百肯定，你所指的是'溢出'，但如果你是浮动列表项，你很可能想在你的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/

文章和无序列表在响应式设计中溢出

1 个答案: