如何通过CSS和HTML实现移动端重叠按钮的分离（上下排列）

要实现移动端两个按钮上下分离排列，只需通过响应式CSS媒体查询调整布局即可，完全不需要JavaScript。以下是具体修改方案：

步骤1：调整按钮容器的基础布局（灵活适配桌面端） #

给按钮所在的.text-content容器添加flex布局，让桌面端按钮自然并排，同时方便移动端快速切换布局方向：

.text-content {
  display: flex;
  gap: 15px; /* 桌面端按钮间的横向间距，可按需调整 */
  align-items: center;
}

步骤2：添加移动端响应式规则 #

针对移动端屏幕（这里以768px为常见分界，可根据需求修改），将布局改为纵向排列：

@media (max-width: 768px) {
  .text-content {
    flex-direction: column;
    align-items: flex-start; /* 可选：按钮左对齐，改为center则居中显示 */
    gap: 20px; /* 移动端按钮间的纵向间距 */
  }
}

替代方案（无需修改容器布局） #

如果不想调整容器样式，也可以直接让按钮在移动端变为块级元素，强制换行：

@media (max-width: 768px) {
  a.main-filled-button {
    display: block;
    margin-bottom: 20px; /* 按钮间的纵向间距 */
  }
  /* 移除最后一个按钮的底部间距 */
  a.main-filled-button:last-child {
    margin-bottom: 0;
  }
}

修改后的完整代码 #

CSS部分 #

a.main-filled-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #000dff;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-filled-button:hover {
  color: #fff;
  background-color: #000dff;
}

/* 新增：桌面端按钮容器布局 */
.text-content {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* 新增：移动端响应式调整 */
@media (max-width: 768px) {
  .text-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

HTML部分（无需修改，保持原结构） #

<div class="item">
  <div class="img-fill">
    <img src="assets/images/slide-02.jpg" alt="">
    <div class="text-content">
      <h3>WELCOME TO AKSM</h3>
      <h5>Leading surveying company</h5>
      <a href="https://www.aksm.gr/wp-content/uploads/2020/03/%CE%9CME_WEBENa-1.pdf" class="main-filled-button">EPAnEK 2014-2020</a>
      <a href="https://www.aksm.gr/wp-content/uploads/2021/06/aksm-prodiagrafes-popup.jpg" class="main-filled-button">ΠΡΟΔΙΑΓΡΑΦΕΣ</a>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Anastasis Kefalas