水平方向の順序なしリストがあります。ただし、画面サイズが特定の解像度を下回ると、リストの 3 番目の項目 (現在は 3 つしかありません) が本来のように 2 行目に移動します。ただし、アイテムは右側にあり、最初のアイテムの下ではなく、2 番目のアイテムの下にあります。ここに私が意味するものがあります:
通常時:
item1 item2 item3
小さい画面:
item1 item2
item3
float:left
リスト項目に設定しました。3 番目の項目を左に移動するにはどうすればよいですか。
ところで、これは FF と IE でのみ発生します。Chrome は希望どおりに表示します。
HTML:
<div class="presskit cf" id="logos">
<h2>
Logos</h2>
<hr />
<ul>
<li class="logoItem">
<a href="/Catapult/media/catapult_media/press_kit/logos/Catapult-Logo-051413-RGB-Clear-Background.zip" target="_blank"><img src="/Catapult/media/catapult_media/press_kit/logos/Catapult-Logo-051413-RGB-Clear-Background.png" /></a></li>
<li class="logoItem">
<a href="/Catapult/media/catapult_media/press_kit/logos/CatapultLogo1Color.zip" target="_blank"><img src="/Catapult/media/catapult_media/press_kit/logos/CatapultLogo1Color.png" /></a></li>
<li class="logoItem">
<a href="/Catapult/media/catapult_media/press_kit/logos/CatapultLogoWhite.zip" target="_blank"><img class="whiteLogo" src="/Catapult/media/catapult_media/press_kit/logos/CatapultLogoWhite.png" /></a></li>
</ul>
</div>
<br />
CSS
#zoneB, #zoneC, #zoneD { max-width: 1024px; margin:0 auto; font:normal 21px "proxima-nova-n4", "proxima-nova", Arial, Helvetica, sans-serif; color:#434343; }
ul { list-style: none; -webkit-padding-start:0px; }
li { float: left; }
h2 { clear:both; }
#leaderBiosList { width:100%; }
.presskit a:hover { color:#f57d3d; }
.presskit a { color:#f57d3d; text-decoration:none; display:block; }
.presskit h2 { font-size: 33px; font-weight: normal; padding-top:2%; width:33%; }
.logoItem { list-style:none; display:inline; }
.logoItem img { max-width:100%; }
.whiteLogo { background-color: #333; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
#leaderBios { height:20%; }
@media all and (max-width: 520px){
.presskit h2 { font-size: 33px; font-weight: normal; width:100% }
.presskit li { float:left; margin-bottom:4%; width:100%; }
.leaderList { width: 100%; margin:2% 5% !important; }
.logoItem { max-width:90%; }
}
@media all and (min-width: 521px){
.presskit h2 { width: 33% }
.presskit li { display:inline; margin-right:4%; margin-bottom:4%; }
.presskit .downloadsList li { width:40%; }
.presskit .leaderList { width: 33%; margin-right: 15%; }
.logoItem { max-width:45%; margin-right:2%; }
#logos ul { clear:both; }
}
@media all and (min-width: 720px){
.presskit .leaderList { width:28%; margin-right:4%; }
}
@media all and (min-width: 850px){
.presskit .downloadsList li { width:30%; }
.presskit .leaderList { width:20%; margin-right:4%; }
.logoItem { max-width:25%; margin-right:6% !important; }
}