我的网站页脚中有5个并排列表,如下所示:



<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>





我想发生的是,在低于992px的任何分辨率下,列表中的每个将占据列的50%,创建3行,每行2个列表,最后一个除外(因为我有5个列表)

这是我的SASS代码:(maxMQ只是媒体查询的混合,$ md-max-width为992px)



.footer {
	.links {

		float: left;
		display: inline-block;
		width: calc(100% / 5);

		@include maxMQ($md-max-width) {
			margin-top: 30px;
			width: 50%;
		}

		.title {
			font-size: 14px;
			margin-bottom: 5px;
			padding-bottom: 7px;
			display: inline-block;
			border-bottom: 2px solid $highlight-blue;
		}

		ul {
			margin: 0;
			padding: 0;
			display: block;
		}

		li {
			margin-top: 5px;
			font-size: 13px;

			a {
				color: #ffffff;
				text-decoration: none;
				cursor: pointer;
			}
		}
	}





问题是,当我将分辨率降低到992px(移动设备/平板电脑)以下时,第三个列表将跳过第二行的位置。所以看起来像这样:

第1行:清单清单
第2列:清单
第3行:清单清单

我想要的是:

第1行:清单清单
第2行:清单清单
第3行:清单

我不知道为什么会这样。我确实知道,当我从“链接” div中删除ul时,它可以正常工作。

任何帮助将不胜感激!谢谢!

最佳答案

这是由于浮动元素造成的,第一个元素的高度比第二个元素高,并且在第二行上创建了此问题。

html - 5个自适应 float div在手机/平板电脑 View 上未正确对齐(&lt;992px)-LMLPHP



要解决此问题,您可以使用flex并删除浮动内容:



.links {
  float: left;
  display: inline-block;
  width: calc(100% / 5);
}

@media all and (max-width:992px) {
  .footer-links {
    display: flex;
    flex-wrap:wrap;
  }
  .links {
    margin-top: 30px;
    width: 50%;
    float: none;
  }
  .title {
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 2px solid $highlight-blue;
  }
  ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  li {
    margin-top: 5px;
    font-size: 13px;
  }
  li a {
    color: #000 text-decoration: none;
    cursor: pointer;
  }
}

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>





或者直接删除浮动而不添加flex,但是您需要解决空格问题以使其宽度为50%:



.links {
  float: left;
  display: inline-block;
  width: calc(100% / 5);
}

@media all and (max-width:992px) {
  .footer-links {
    font-size: 0; /* remove white spaces */
  }
  .links {
    margin-top: 30px;
    width: 50%;
    float: none;
    font-size: initial; /* put back font as initial*/
    vertical-align:top;
  }
  .title {
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 2px solid $highlight-blue;
  }
  ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  li {
    margin-top: 5px;
    font-size: 13px;
  }
  li a {
    color: #000 text-decoration: none;
    cursor: pointer;
  }
}

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>





或者,您可以简单地为元素添加最小高度,以确保它们具有相同的高度:



.links {
  float: left;
  display: inline-block;
  width: calc(100% / 5);
}

@media all and (max-width:992px) {
  .links {
    margin-top: 30px;
    width: 50%;
    min-height:170px; /* adjust this value with want you what*/
  }
  .title {
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 2px solid $highlight-blue;
  }
  ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  li {
    margin-top: 5px;
    font-size: 13px;
  }
  li a {
    color: #000 text-decoration: none;
    cursor: pointer;
  }
}

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>





针对您的情况的另一种简单解决方案是使用clear:left清除每行最后一个元素之后的浮动(但是如果您更改逻辑,则需要对此进行调整,例如每行3个而不是每行2个):



.links {
  float: left;
  display: inline-block;
  width: calc(100% / 5);
}

@media all and (max-width:992px) {
  .links {
    margin-top: 30px;
    width: 50%;
  }
  /* Added this code*/
  .links:nth-child(2n+1) {
    clear:left;
  }
  /**/
  .title {
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 2px solid $highlight-blue;
  }
  ul {
    margin: 0;
    padding: 0;
    display: block;
  }
  li {
    margin-top: 5px;
    font-size: 13px;
  }
  li a {
    color: #000 text-decoration: none;
    cursor: pointer;
  }
}

<div class="row">

  <div class="col-xs-12  footer-links">

    <div class="links">
      <h1 class="title">ABOUT US</h1>
      <ul>
        <li class="link"> <a href="#">About Company</a></li>
        <li class="link"> <a href="#">Legal Documents</a></li>
        <li class="link"> <a href="#">Careers</a></li>
        <li class="link"> <a href="#">Contact Us</a></li>
        <li class="link"> <a href="#">FAQs</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">ACCOUNTS</h1>
      <ul>
        <li class="link"><a href="#">Register</a></li>
        <li class="link"><a href="#">Compare Account Types</a></li>
        <li class="link"><a href="#">Funding Options</a></li>
        <li class="link"><a href="#">Islamic Account</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">INSTRUMENTS</h1>
      <ul>
        <li class="link"> <a href="#">Currencies</a></li>
        <li class="link"> <a href="#">Commodities</a></li>
        <li class="link"> <a href="#">Metals</a></li>
        <li class="link"> <a href="#">Shares</a></li>
        <li class="link"> <a href="#">Bonds</a></li>
        <li class="link"> <a href="#">Indices</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">PLATFORMS</h1>
      <ul>
        <li class="link"> <a href="#">Meta Trader 4</a></li>
        <li class="link"> <a href="#">MT4 Desktop</a></li>
        <li class="link"> <a href="#">MT4 iOS</a></li>
        <li class="link"> <a href="#">MT4 Android</a></li>
        <li class="link"> <a href="#">MT4 Webtrader</a></li>
      </ul>
    </div>
    <div class="links">
      <h1 class="title">TRADING TOOLS</h1>
      <ul>
        <li class="link"> <a href="#">Expiration Dates</a></li>
        <li class="link"> <a href="#">Market Hours</a></li>
        <li class="link"> <a href="#">Holiday Calendar</a></li>
        <li class="link"> <a href="#">Economic Calendar</a></li>
      </ul>
    </div>





  </div>

09-25 16:25