html - 如何对齐输入表单？

Question

我在前端开发方面并不强:)我正在使用 Bootstrap 来创建表单。但看起来不太好。如何将输入表单对齐在一列中？

<form>
    <div class="form-group form-inline">
        <label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
        <input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
    </div>
    <div class="form-group form-inline">
        <label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
        <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
    </div>
    <div class="col-md-12 text-center block-buttons">
        <button type="submit" class="btn btn-primary btn-lg">Continue</button>
    </div>
</form>

enter image description here

Answer 1

Use of display:table-*

table {
  border-collapse: separate;
}

.form-inline {
  display: table-row;
}

.form-inline label, .form-inline input {
  display: table-cell;
  margin: 0 0 5px 10px;
}

<form>
  <div class="form-group form-inline">
    <label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
    <input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
  </div>
  <div class="form-group form-inline">
    <label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
    <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
  </div>
  <div class="col-md-12 text-center block-buttons">
    <button type="submit" class="btn btn-primary btn-lg">Continue</button>
  </div>
</form>