如何将不等于<li>的<ul>分为两行并显示<li>中心

SkewerHed 发表于 Dev

串烧

抱歉，如果其他地方都回答了这个问题，但我找不到任何帮助。

TLDR-我有这个。我需要这个，但仅在（max-width：768px）和（min-width：481px）之间。

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

所以我需要的是，当屏幕显示（最小宽度：481px）和（最大宽度：768px）时，链接需要下拉成两行。

只有7个链接。理想情况下，我将4个顶部和3个底部放置在两排链接均居中的位置。

数量不均会把我弄乱，否则我就不会有问题。

我试图包装这样的链接：

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

提前致谢

用户名

@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;
    }
}

试试这个。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。