html - 有没有办法让 3 个表单元素排在一行？

Question

完整的表单代码: https://codepen.io/pv8172/pen/RwrENYy

<div class="element-select">
                        <label class="title">Giving Schedule</label>
                        <div class="medium">
                            <span>
                                <select name="giftSelect" id="giftSelect">
                                    <option selected="selected" value="OneTime">Once</option>
                                    <option value="1">Monthly</option>
                                    <option value="3">Quarterly</option>
                                    <option value="6">Semi-annual</option>
                                    <option value="12">Annual</option>
                                </select>
                            </span>
                        </div>
                    </div>
                    <br>
                    <div style="float:left;" id="startDate" class="element-date">
                        <input class="large" data-format="yyyy-mm-dd" type="date" id="DonDate" name="startDate"
                            placeholder="Start Date" />
                    </div>
                    <div style="float:right;" id="totalOccurance" class="element-input">
                        <input
                            class="large" type="text" id="totOcc" name="totalOccurance" placeholder="Total Occurrence" />
                    </div>

通过使用 float 提升，只有“总发生次数”和“开始日期”在一行中，右。我使用formoid来生成表单。我正在尝试对齐表单名称字段:giftSelect、startDate、totalOccurance

我能够获得开始日期和总发生次数，但无法获得礼物选择。

Answer 1

更改您的 HTML 并添加以下 CSS:

#myDiv {
  display: flex;
  align-items: center;
}

<div id="myDiv">
  <div class="element-select">
    <label class="title">Giving Schedule</label>
      <div class="medium">
        <span>
          <select name="giftSelect" id="giftSelect">
            <option selected="selected" value="OneTime">Once</option>
            <option value="1">Monthly</option>
            <option value="3">Quarterly</option>
            <option value="6">Semi-annual</option>
            <option value="12">Annual</option>
          </select>
        </span>
      </div>
    </div>
    <div id="startDate" class="element-date">
      <input class="large" data-format="yyyy-mm-dd" type="date" id="DonDate" name="startDate" placeholder="Start Date" />
    </div>
    <div id="totalOccurance" class="element-input">
      <input class="large" type="text" id="totOcc" name="totalOccurance" placeholder="Total Occurrence" />
  </div>
</div>