1

私は 3 つの記事で構成されるサイトを持っています。レスポンシブ デザイン用にいくつかのメディア クエリを設定していますが、サイズを変更すると、記事の 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 があります => 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 に答える