高度与日期不一致并选择

Question

我遇到了这个问题，不确定解决方案。这 2 个输入的高度应该完全相同，但事实并非如此。在详尽地查看了类似的问题后，我确认这不是由于盒子大小。任何想法或帮助将不胜感激。

这是有问题的问题：

.updateInput select {
  width: calc(24.5% - 4px);
  min-height: 1.5em;
}

select {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0.5em;
  font-size: 16px;
  font-family: Courier, Arial, Helvetica, sans-serif;
  cursor: pointer;
  line-height: 14px;
  min-height: 1.5em;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.updateInput input[type=date] {
  width: calc(24.5% - 4px);
}

input[type=number],
input[type=date] {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  font-family: Courier, Arial, Helvetica, sans-serif;
  cursor: pointer;
  line-height: 14px;
}

input {
  font: inherit;
  vertical-align: middle;
  padding: 0.5rem;
  margin: 0;
  display: inline-block;
  min-height: 1.5em;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="saleUpdateInput" class="updateInput">
  <form id="updateInputData">
    <select>
      <option selected>Select product</option>
    </select>
    <select>
      <option selected>Select sale %</option>
    </select>
    <input type="date">
    <input type=submit value="Update">
  </form>
</div>

cmets 中要求的最小示例： https://jsfiddle.net/8qexLpa3/

Answer 1

您会注意到默认情况下display:inline-block 将选择对齐到容器的顶部，并将输入对齐到底部。

<div id="saleUpdateInput" class="updateInput">
  <form id="updateInputData">
    <select>
      <option selected>Select product</option>
    </select>
    <select>
      <option selected>Select sale %</option>
    </select>
    <input type="date">
    <input type=submit value="Update">
  </form>
</div>

我建议您使用弹性框来控制这种行为。

#updateInputData {
  display: flex;
}

<div id="saleUpdateInput" class="updateInput">
  <form id="updateInputData">
    <select>
      <option selected>Select product</option>
    </select>
    <select>
      <option selected>Select sale %</option>
    </select>
    <input type="date">
    <input type=submit value="Update">
  </form>
</div>