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

Question

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

Answer 1

试试这个：

.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>

Answer 2

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

.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);

    }