Question

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

我试过了

＆＃39;溢出-x：隐藏＆＃39;

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

显示内联块

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

任何帮助将不胜感激

网站不允许我提前添加代码，说太多代码没有足够的文字

------------- 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 元素上以及当ul比窗口视图端口宽时，当li到新行时

看下面的例子，

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

＆＃13;

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

＆＃13;

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

＆＃13;

ul li比浏览器窗口强大到新的分页行

1 个答案: