css - ul li wide than browser window 强制到新行进行分页

Question

当 ul li 分页菜单比浏览器窗口宽时，如何让它换行，它在桌面上工作正常，但在移动设备上它比浏览器窗口宽。

我试过了

'overflow-x: hidden'

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

display inline-block

，但这只是垂直堆叠列表。

任何帮助将不胜感激

Site would not allow me to add code earlier, said too much code not enough text

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

.page-item:first-child .page-link {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}


.page-item.active .page-link {
    z-index: 1;
    color: #282d32;
    background-color: #acacac !important;
    border-color: #acacac !important;
    margin: 5px;
    border-radius: 25px;
}

.page-link:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.page-link {
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #282d32 !important;
    background-color: #fff;
    border: 1px solid #dee2e6;
    margin: 5px;
    border-radius: 25px;
}

.page-item:last-child .page-link {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

--------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>

Answer 1

您可以使用 css flexbox 这将帮助您获得所需的输出，只需将 ul 的显示设置为 flex 并使用属性 flex-wrap : wrap ;也在父 ul 元素上，并且在任何时候当 li while 在 ul 比窗口 View 端口宽时换行

看下面的例子，

你可以了解更多
guid-to-css-flexbox

ul {
list-style:none; 
display:flex;
flex-wrap : wrap;
}
li {
width:100px ;
height:100px; 
border-radius : 3px ; 
background-color : red; 
margin:4px ;
text-align : center ;
}

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>