css 如何对齐两个按钮？

ogsagwnx 于 2023-05-08 发布在其他

关注(0)|答案(3)|浏览(185)

如何对齐下面图像中显示的两个按钮？

<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>
<button type="submit" class="btn btn-primary">Save Changes</button>
<a class="btn btn-danger" href="/expenses">Cancel</a>

css

来源：https://stackoverflow.com/questions/76170988/how-to-align-two-buttons

3条答案

按热度按时间

sigwle7e1#

将按钮放在父容器中，并将其display属性设置为flex。
在下面的代码中，我包含了bootstrap包并创建了一个flex父容器。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<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="d-flex flex-row align-items-center">
  <button type="submit" class="btn btn-primary">Save Changes</button>
  <a class="btn btn-danger" href="/expenses">Cancel</a>
</div>

赞(0）回复(0）举报 2023-05-08

ujv3wf0j2#

要对齐这两个按钮，可以使用Bootstrap网格系统，并将按钮 Package 在一个新的div元素中，类为row，并使用col类指定每个按钮的宽度。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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">
    <button type="submit" class="btn btn-primary">Save Changes</button>
  </div>
  <div class="col">
    <a class="btn btn-danger" href="/expenses">Cancel</a>
  </div>
</div>

赞(0）回复(0）举报 2023-05-08

wwwo4jvm3#

我复制了你的示例代码，它对我来说很好...
在 Bootstrap 中仔细检查脚本...