如何在form-field类的div中右对齐按钮？CSS问题求助

你的核心问题在于Grid布局会完全忽略float属性——你给.form-field设置了display: grid，而float是为传统流式布局设计的属性，在Grid容器的子元素上完全不起作用，所以你加float: right和clear: both都不会有效果。

针对你的需求（仅让.form-field内的按钮右对齐），有两种简单可行的修复方式：

方法1：利用Grid的对齐属性调整容器 #

因为存放按钮的.form-field里只有按钮一个元素，直接修改这个容器的对齐属性即可：

/* 精准匹配包含按钮的.form-field容器 */
.form-field:has(button) {
  justify-content: end;
}

如果需要兼容不支持:has()选择器的旧浏览器，可以给按钮所在的.form-field额外加一个类（比如form-field--button），再写样式：

.form-field--button {
  justify-content: end;
}

对应的HTML修改为：

<div class="form-field form-field--button">
  <button class="btn btn-primary">Submit</button>
</div>

方法2：给按钮设置自动左侧外边距 #

在Grid布局中，margin-left: auto会让元素占据容器内剩余的左侧空间，从而把自身挤到右侧：

.form-field button {
  margin-top: 2em;
  margin-left: auto;
}

这种方法不需要修改容器属性，直接作用于按钮，更简洁。

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