html - 如何将具有不相等的 <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;
    }
}

试试这个。