Css ul li比浏览器窗口宽，强制在新行上分页

当ul li分页菜单比浏览器窗口宽时，如何使其在新的行上断开？它在桌面上正常工作，但在移动设备上却比浏览器窗口宽

我试过了

“溢出-x:隐藏”

但这不起作用，因为窗口仍然水平滚动，我已经尝试过了

显示内联块

，但这只是垂直堆叠列表

任何帮助都将不胜感激

网站不允许我提前添加代码，说代码太多了不行 足够的文本

-------------CSS------------------

<nav aria-label="Page navigation">
                <ul class="pagination">
                        <li class="page-item active">
                            <a class="page-link" href="/">1</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">2</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">3</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">4</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">5</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">6</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">7</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">8</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">9</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">10</a>
                        </li>
                </ul>
            </nav>

---------HTML---------------------

<nav aria-label="Page navigation">
                <ul class="pagination">
                        <li class="page-item active">
                            <a class="page-link" href="/">1</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">2</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">3</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">4</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">5</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">6</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">7</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">8</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">9</a>
                        </li>
                        <li class="page-item ">
                            <a class="page-link" href="/">10</a>
                        </li>
                </ul>
            </nav>

您可以使用css flexbox，这将帮助您获得所需的输出，只需将ul显示为flex并使用flex wrap:wrap属性；也在父ul元素上，以及当ul比窗口视图端口宽时，当li断开到新线上时的任何时间

看看下面的例子

您可以了解更多信息

ul{
列表样式：无；
显示器：flex；
柔性包装：包装；
}
李{
宽度：100px；
高度：100px；
边界半径：3px；
背景色：红色；
保证金：4倍；
文本对齐：居中；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,

您有一些代码示例可以展示给我们吗？请分享您尝试过的代码。收回这一点，它现在起作用了，以前不起作用了。Flex box对于单向布局来说非常神奇，您可以使用它来控制您的布局