0

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

正常：
item1 item2 item3
小屏幕：
item1 item2
          item3

我已经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; }
}
4

2 回答 2

0

我没有直接设置 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; }
}

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

于 2013-06-24T21:39:19.347 回答
0

当您需要遵循正常流程时，请考虑使用 display inline。你可能认为你用浮动解决了问题，但你创造的比你解决的要多。

你所要做的就是

li { display: inline; }

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

于 2014-08-19T20:54:53.590 回答