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

Question

盒子的图像：堆叠的盒子

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

Answer 1

试试这个：.test {&nbsp; box-sizing: border-box;&nbsp; position: absolute;&nbsp; left: 50%;&nbsp; margin-left: -200px;}ul {&nbsp; &nbsp; position: relative;}.test li {&nbsp; 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) {&nbsp; display: block;&nbsp; left: 100px;&nbsp; bottom: 200px;}&nbsp;<div class="test">&nbsp; &nbsp;<ul>&nbsp; &nbsp; &nbsp; <li>test1</li>&nbsp; &nbsp; &nbsp; <li>test2</li>&nbsp; &nbsp; &nbsp; <li>test3</li>&nbsp; </ul>&nbsp; </div>

Answer 2

您可以诉诸 flex 或更改 display 属性 ，因此理想情况下，您应该拥有如下所示的代码.test li {&nbsp; &nbsp; &nbsp; &nbsp;border: 1px solid black;&nbsp; &nbsp; &nbsp; &nbsp;/*display: inline-block; change this to block*/&nbsp; &nbsp; &nbsp; &nbsp;display: block;&nbsp; &nbsp; &nbsp; &nbsp;float: left;&nbsp; &nbsp; &nbsp; &nbsp;font-size: 20px;&nbsp; &nbsp; &nbsp; &nbsp;list-style-type: none;&nbsp; &nbsp; &nbsp; &nbsp;width: 150px;&nbsp; &nbsp; &nbsp; &nbsp;height: 150px;&nbsp; &nbsp; &nbsp; &nbsp;line-height: 30px;&nbsp; &nbsp; &nbsp; &nbsp;padding-left: 1px;&nbsp; &nbsp; &nbsp; &nbsp;padding-right: 1px;&nbsp; &nbsp; &nbsp; &nbsp;margin: 15px 25px;&nbsp; &nbsp; &nbsp; &nbsp;text-align: center;&nbsp; &nbsp; &nbsp; &nbsp;border-radius: 5%;&nbsp; &nbsp; &nbsp; &nbsp;background-color: rgb(255, 255, 255, 0.9);&nbsp; &nbsp; }