如何对齐表单中的两个按钮？附代码与效果截图

从你的代码能看出用了Bootstrap框架，下面提供几种简单的对齐方法：

方法1：使用Bootstrap按钮组（btn-group） #

把两个按钮包裹在btn-group容器里，框架会自动处理对齐和间距：

<div class="form-group">
  <label for="ExpenseDate">Expense Date:</label>
  <input type="date" class="form-control" id="ExpenseDate" name="ExpenseDate" required>
</div>
<div class="form-group">
  <label for="CategoryDescription">Category Description:</label>
  <input type="text" class="form-control" id="CategoryDescription" name="CategoryDescription" required>
</div>
<div class="btn-group">
  <button type="submit" class="btn btn-primary">Save Changes</button>
  <a class="btn btn-danger" href="/expenses">Cancel</a>
</div>

方法2：使用Bootstrap网格布局 #

如果需要按钮和上方表单元素对齐，可以把按钮放在row容器里，利用网格列控制：

<div class="form-group">
  <label for="ExpenseDate">Expense Date:</label>
  <input type="date" class="form-control" id="ExpenseDate" name="ExpenseDate" required>
</div>
<div class="form-group">
  <label for="CategoryDescription">Category Description:</label>
  <input type="text" class="form-control" id="CategoryDescription" name="CategoryDescription" required>
</div>
<div class="row">
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Save Changes</button>
  </div>
  <div class="col-auto">
    <a class="btn btn-danger" href="/expenses">Cancel</a>
  </div>
</div>

方法3：自定义CSS实现对齐 #

如果不想依赖Bootstrap组件，给按钮容器添加flex布局：

<style>
  .button-container {
    display: flex;
    gap: 10px; /* 控制按钮间距 */
  }
</style>
<div class="form-group">
  <label for="ExpenseDate">Expense Date:</label>
  <input type="date" class="form-control" id="ExpenseDate" name="ExpenseDate" required>
</div>
<div class="form-group">
  <label for="CategoryDescription">Category Description:</label>
  <input type="text" class="form-control" id="CategoryDescription" name="CategoryDescription" required>
</div>
<div class="button-container">
  <button type="submit" class="btn btn-primary">Save Changes</button>
  <a class="btn btn-danger" href="/expenses">Cancel</a>
</div>

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