Question

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

这在屏幕上运行正常＆gt; = max-width。我们如何让我们的ul在div的屏幕上居中，而不是max-width，而不是以我们的李为中心？

这是我们的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;}

Answer 2

为桌面分辨率或其他最低分辨率创建媒体查询。

@media screen and (min-width: 600px) 
{   
#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;}
}

水平居中＆＃39; ul＆＃39;在一个＆＃39; div＆＃39;最大宽度没有居中，仅使用CSS

2 个答案: