ul li шире, чем окно браузера заставляет новую строку для разбивки

Question

Как сделать так, чтобы меню разбивки на новые строки переходило на новую строку, когда оно шире, чем окно браузера, на рабочем столе работает нормально, но на мобильных устройствах оно шире, чем окно браузера.

Я пробовал

'overflow-x: hidden'

, но это не работает, поскольку окно по-прежнему прокручивается горизонтально, я пытался

отображает встроенный блок

, но это просто складывает список по вертикали.

Любая помощь будет оценена

Сайт не позволил бы мне добавлять код раньше, сказал, что слишком много кода недостаточно текста

------------- 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-wrap: wrap;также на родительском элементе ul и в любое время, когда li переходит на новую строку, когда ul шире, чем порт представления окна

, посмотрите на приведенный ниже пример

вы можете узнать больше
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>