html - 水平居中 'ul' 在 'div' 最大宽度不居中 'li' 仅使用 CSS

Question

我们在 ul 上使用 max-width 将单行显示的 li 的数量限制为 5。ul 应该始终以我们的 div 为中心，因此 margin:0 auto。

这在屏幕上工作正常 >=max-width。我们如何让我们的 ul 在 max-width 的屏幕上居中 div 而不居中我们的 li？

这是我们的 html:

<div id="wrapper-team">
    <ul id="liste-team">
        <li>....</li>
        <li>....</li>
        <li>....</li>
        <li>....</li>
        <li>....</li>
        <li>....</li>
        <li>....</li>
    </ul>
</div>

这里是我们的 CSS:

#wrapper-team{width:100%; margin:0 auto;}
ul#liste-team{display:block; max-width:1432px; margin:0 auto; padding-top:5px;}
ul#liste-team li{display:inline-block; width:280px; height:280px; list-style-type:none; margin:0 3px 5px 0;}

非常感谢您的帮助!

Answer 1

尝试添加min-width属性。

ul#liste-team{display:block; min-width: 980px; max-width:1432px; margin:0 auto; padding-top:5px;}