HTML&CSS文字上下堆叠问题求助：代码为何无法实现垂直排列？

嘿，我来帮你揪出问题所在～

你遇到的并排问题，根源就在.upgrade类的display: inline-block;上！这个CSS属性的作用是让元素在同一行内以块级形式展示，所以两个带这个类的<div>就会挤在一行里，而不是上下堆叠。

想要实现Test在上、Upgrade在下的效果，给你几个简单的解决方案：

方案1：直接移除inline-block（最省事） #

div元素默认是display: block;，块级元素会自动占据整行，自然就能上下排列了：

.upgrade {
  /* 删掉 display: inline-block; 这一行 */
}

方案2：保留inline-block但强制占满整行 #

如果因为其他布局需求必须保留inline-block，可以给.upgrade加上width: 100%;，让每个元素都占满父容器的宽度，这样就只能上下排布了：

.upgrade {
  display: inline-block;
  width: 100%; /* 新增这一行 */
}

方案3：用Flex布局强制垂直排列 #

给父元素<li>设置Flex布局，指定子元素垂直排列，这样不管子元素是什么display属性，都会乖乖上下排：

li {
  display: flex;
  flex-direction: column; /* 强制子元素垂直排列 */
}
.upgrade {
  display: inline-block; /* 这个属性可以保留，不影响效果 */
}

另外要注意：你当前的HTML里，Upgrade的div在Test的div前面，所以即使解决了并排问题，Upgrade还是会在上、Test在下。如果要Test在上，记得把两个<div>的顺序调换一下哦！调整后的HTML示例：

<li>
  <div class="upgrade">
    <a href="" class="nav-link dropdown-user-link">
      <span class="user-name">Test</span>
    </a>
  </div>
  <div class="upgrade">
    <a href="" class="nav-link dropdown-user-link">
      <span class="user-name">Upgrade</span>
    </a>
  </div>
</li>

内容的提问来源于stack exchange，提问作者Adam Townsend