Question

这是关于响应的，所以无论页面的宽度如何，ul应始终以页面为中心，并且li对齐于左侧。

我不希望ul宽度为页面宽度的100％，因此ul的左侧和右侧应该有相同的边距。

重要提示：ul的宽度应该是一行中显示的所有li的100％。

<style> 
.box { 
    width:100px;
    height:100px;
    background:black;
    margin: 10px;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
}


ul {
    background: lightgray;
    overflow: hidden;
}


li {
display: inline-block;
}

<div class="wrapper">
<ul>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
</ul>

有一些图片可以帮助您理解：CLICK

居中ul并取li的全宽，而li则对齐左边

0 个答案: