如何让第三个盒子放在第一个盒子下面而不是中间?

Question

框的图像： 堆叠的箱子

我的问题是。我如何让第三个框放在第一个框下面而不是在中心，但我还需要所有内容都在页面的中心。

Answer 1

您可以诉诸 flex 或更改显示属性，因此理想情况下您应该具有如下所示的代码

.test li {
border: 1px solid black;
/*display: inline-block; change this to block*/
display: block;
float: left;
font-size: 20px;
list-style-type: none;
width: 150px;
height: 150px;
line-height: 30px;
padding-left: 1px;
padding-right: 1px;
margin: 15px 25px;
text-align: center;
border-radius: 5%;
background-color: rgb(255, 255, 255, 0.9);
}

Answer 2

试试这个：

.test {
box-sizing: border-box;
position: absolute;
left: 50%;
margin-left: -200px;
}
ul {
position: relative;
}
.test li {
display: inline-block;
border: 1px solid black;
font-size: 20px;
list-style-type: none;
width: 150px;
height: 150px;
line-height: 30px;
padding-left: 1px;
padding-right: 1px;
margin: 15px;
text-align: center;
border-radius: 5%;
background-color: rgb(255, 255, 255, 0.9);
}
li:nth-child(3) {
display: block;
left: 100px;
bottom: 200px;
}

<div class="test">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>