当屏幕尺寸足够小时，列表中的第三项移动到右侧而不是左侧的第二行答案

【问题标题】：When screen size is small enough, the third item in list moves to second row to the right rather than left当屏幕尺寸足够小时，列表中的第三项移动到右侧而不是左侧的第二行
【发布时间】：2014-08-20 04:54:53
【问题描述】：

我有一个水平的无序列表。但是，当屏幕尺寸低于某个分辨率时，列表中的第三项（目前只有 3 个）会像预期的那样移动到第二行。但是，该项目位于右侧，位于第二个项目下方而不是第一个项目下方。这就是我的意思：

正常：
项目 1 项目 2 项目 3
小屏幕：
项目 1 项目 2
第 3 项

我在列表项上设置了float:left。如何将第三项向左移动。

顺便说一句，这只发生在 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; }
}

【问题讨论】：

我们可以看看你的代码吗？谢谢！
添加了特定部分的html和所有css
所有图片的大小都一样吗？如果没有，包装可能不会像预期的那样干净。示例：jsfiddle.net/kX8FE/1.
是的，它们的大小都一样。它是相同的图像，只是颜色不同。
您的代码似乎运行良好：jsfiddle.net/6KrXE

标签： html css responsive-design

【解决方案1】：

我没有直接设置 li 的样式，而是删除了 li css 并设置了 #logoItem 样式，这似乎在 FF 中有效：http://jsfiddle.net/derekstory/62jdT/3/

 ul {
     list-style: none;
     -webkit-padding-start:0px;
 }

 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 {
     float: left;;
     width: 200px; 
     height: 20px; 
     background: #999;
    margin-left: 20px;
    margin-top: 20px;

 }
 .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; }
}

并不是说我只是为了测试目的而更改了一些规格，例如背景、宽度和高度。

【讨论】：

谢谢，我采用了您为 .logoItem 设置的样式，仅使用了 height 属性并将其设置为图像的高度。这行得通。

【解决方案2】：

当您需要遵循正常流程时，请考虑使用内联显示。你可能认为你用浮点数解决了问题，但你创造的比你解决的要多。

你要做的就是

li { display: inline; }

这是您的内联列表： http://jsfiddle.net/kX8FE/2/

【讨论】：