如何将具有不等 <li> 的 <ul> 拆分为 2 行并显示 <li> 中心

Question

抱歉，如果这已在其他地方得到回答，但我找不到任何帮助。

TLDR - 我有this。我需要this，但只需要在 (max-width:768px) 和 (min-width: 481px) 之间。

我有一个固定的 .navbar，带有合理的 navbar-nav 链接。

所以我需要的是，当屏幕显示 (min-width:481px) 和 (max-width:768px) 时，链接需要下拉成 2 行。

只有 7 个链接。理想情况下，我会放置 4 个顶部和 3 个底部，同时让两行的链接完全居中。

奇数有点搞砸了，否则我不会有问题。

我尝试像这样包装链接：

#4links ul li {
    width: 25%;
}
#3links ul li {
    width: 33.333%
}

提前致谢

Answer 1

@media screen and (max-width:768px) and (min-width: 481px) {
    #4links ul li {
       width: 25%;
    }
    #3links ul li {
       width: 33.333%
    }
    #4links ul {
       width: 100%;
       float: left;
    }
    #3links ul {
       margin: 0 auto;
    }
}

试试这个。