我的网站页脚中有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时,它可以正常工作。
任何帮助将不胜感激!谢谢!
最佳答案
这是由于浮动元素造成的,第一个元素的高度比第二个元素高,并且在第二行上创建了此问题。
要解决此问题,您可以使用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>