如何在2个输入之间放置一个div，垂直对齐

Question

如何将i div放在2个输入之间，具有相同的高度，垂直对齐？这听起来很简单，我不明白为什么下面的代码不起作用：

＆＃13;

＆＃13;

input{
    width: 35%;
    border: 1px solid #A7A7A7;
    display: inline-block;
    font-size: 11px;
    padding: 0 5px;
    line-height: 18px;
}
input:first-child{
    border-right: none;
}
input:nth-child(3){
    border-left: none;
}
#between_inputs{
    width: 10px;
    height: 18px;
    display: inline-block;
    background-color: white;
    border-top: 1px solid #A7A7A7;
    border-bottom: 1px solid #A7A7A7;
    line-height: 18px;
}

＆＃13;

<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max"  placeholder="max."/>

＆＃13;

＆＃13;

＆＃13;

不知何故div被置于输入之上？有什么问题？

Answer 1

您可以使用 Flexbox 执行此操作：

＆＃13;

＆＃13;

.flex {
  display: flex; /* displays flex-items (children) inline */
}

input {
  width: 35%;
  border: 1px solid #A7A7A7;
  display: inline-block;
  font-size: 11px;
  padding: 0 5px;
  line-height: 18px;
}

input:first-child {
  border-right: none;
}

input:nth-child(3) {
  border-left: none;
}

#between_inputs {
  /* flex-grow: 1; recommended, grows and takes the remaining horizontal space */
  width: 10px;
  /* height: 18px; not necessary, flex-items have the same height by default */
  display: inline-block;
  background: Lavender; /* just for demo */
  border-top: 1px solid #A7A7A7;
  border-bottom: 1px solid #A7A7A7;
  line-height: 18px;
}

＆＃13;

<div class="flex">
  <input type="text" name="min" placeholder="min.">
  <div id="between_inputs"></div>
  <input type="text" name="max"  placeholder="max.">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将vertical-align添加到输入：

input{
    width: 35%;
    border: 1px solid #A7A7A7;
    display: inline-block;
    font-size: 11px;
    padding: 0 5px;
    line-height: 18px;
    vertical-align: top;/* <<<< this one */
}

Answer 3

您可以为vertical-align: middle和inputs添加div，并降低div的高度以使其17px，以便它们完全对齐。

＆＃13;

＆＃13;

input{
    width: 35%;
    border: 1px solid #A7A7A7;
    display: inline-block;
    font-size: 11px;
    padding: 0 5px;
    line-height: 18px;
    vertical-align: middle
}
input:first-child{
    border-right: none;
}
input:nth-child(3){
    border-left: none;
}
#between_inputs{
    width: 10px;
    height: 17px;
    display: inline-block;
    background-color: white;
    border-top: 1px solid #A7A7A7;
    border-bottom: 1px solid #A7A7A7;
    line-height: 18px;
    vertical-align: middle
}

＆＃13;

<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max"  placeholder="max."/>

＆＃13;

＆＃13;

＆＃13;