如何在同一行中对齐文本框？

Question

我无法在同一行上对齐两个输入框。

<div class="formHalf headForms  floatLeft" style="width: 55%;">
                        <label for="Payer Name" class="text inline" style="width: 80px">
                            Payer Name</label>
                        @Html.TextBoxFor(model => model.SearchValue1, new { @class = "text search", @style = "width: 56%;", tabindex = "1" })
                    </div>

                     <div class="formHalf headForms  floatLeft" style="width: 55%;">
                        <label for="Abbreviation" class="text inline" style="width: 80px">
                            Abbreviation </label>
                        @Html.TextBoxFor(model => model.SearchValue2, new { @class = "text search", @style = "width: 56%;", tabindex = "1" })
                    </div>

Answer 1

<div class="formHalf headForms  floatLeft inlineElements" style="width: 55%;">
       <label for="Payer Name" class="text inline" style="width: 80px">
              Payer Name
       </label>
       <input type="text">
</div>

<div class="formHalf headForms  floatLeft inlineElements" style="width: 55%;">
  <label for="Abbreviation" class="text inline" style="width: 80px">
                                Abbreviation </label>
  <input type="text">
</div>

css文件：

.inlineElements {
    display: inline;
}

结果：

Answer 2

使用{边距：0自动； }以使其居中对齐

Answer 3

使用flexbox css property来完成

将您的“ formHalf” div换成另一个。将这些CSS属性用于“环绕div”

display:flex;
align-items:center;

然后参考指南

Answer 4

请参见下面的代码，这应该对您有用

.section {
    width: 50%;
    float: left;
}

.form-section {
    clear: both;
}

<div class="form-section">


  <div class="section">
      <label>name</label>
      <input type="text">
    </div>
    <div class="form-group">
      <label>name</label>
      <input type="text">
    </div>

</div>