如何让按钮在小屏幕下铺满宽度，桌面端保持右对齐？

问题出在父容器的样式没有在小屏幕下重置：你当前的父容器带了ml-auto和text-right，在小屏幕下ml-auto依然会让容器自身靠右且宽度收缩，导致按钮即使设置width:100%也只能占父容器的宽度，无法全屏。

解决步骤：

• 给父容器加专属类（比如btn-wrapper），方便在媒体查询中精准修改样式
• 在小屏幕媒体查询中，重置父容器的margin-left为0，让容器占满可用宽度
• 确保按钮的块级显示和宽度设置生效

修改后的完整代码：

HTML #

<div class="btn-wrapper ml-auto text-right">
    <button class="btn btn-next mobile">下一步</button>
</div>

CSS #

@media screen and (max-width: 576px) {
  /* 重置父容器样式，让它占满宽度 */
  .btn-wrapper.ml-auto {
    margin-left: 0;
    width: 100%;
  }

  .mobile {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
  }
}

如果不需要!important提升优先级，就用.btn-wrapper.ml-auto这种更具体的选择器覆盖原有样式。另外注意：HTML里的<button />自闭合写法不符合标准，要写成<button>按钮文本</button>，避免渲染异常。

内容的提问来源于stack exchange，提问作者Ivan Debono