如何将子文本元素与输入文本元素的底部对齐

Question

我创建了一个HTML元素供用户输入浮点值，然后将输入分为两个输入元素，一个用于整数，另一个用于小数。我在两个输入文本元素之间包括一个小数点作为文本元素，但它未与两个输入元素的底部对齐，因此我不确定如何解决此问题。这是我的代码的片段：

#whole {
  text-align: center;
  width: 25%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
#decimal {
  text-align: center;
  width: 45%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}

<div>
       <input type=text maxlength=1 id=whole name=whole value=>
       <span> . </span>
       <input type=text maxlength=3 id=decimal name=decimal value=>
    </div>

Answer 1

您可以在vertical-align元素上使用css span属性。像这样：

.decimal-box span{
    vertical-align: bottom;  /*align decimal point to bottom*/
    line-height: 0.7; /* If desired, set line-height push decimal point further down/*
}

#whole {
  text-align: center;
  width: 25%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}

#decimal {
  text-align: center;
  width: 45%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}

<div class="decimal-box">
     <input type="text" maxlength=1 id="whole" name="whole" value="">
     <span> . </span>
     <input type="text" maxlength="3" id="decimal" name="decimal" value="">
 </div>

Answer 2

您可以将其设置为具有和id而不是范围的div，

#whole {
  text-align: center;
  width: 25%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
#decimal {
  text-align: center;
  width: 45%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
#dpoint{
  margin-top: 20px;
  padding-left: 5px;
  padding-right: 5px;

}
.wrap{
  display: inline-flex;
}

  <div class="wrap">
    <input type=text maxlength=1 id=whole name=whole value=>
    <div id="dpoint"> . </div>
    <input type=text maxlength=3 id=decimal name=decimal value=>
 </div>

或者您可以在div元素内的html中添加样式，并保持CSS不变

  <div style="display: inline-flex;">
    <input type=text maxlength=1 id=whole name=whole value=>
    <div style='margin-top: 20px; padding-left: 5px; padding-right: 5px;'> . </div>
    <input type=text maxlength=3 id=decimal name=decimal value=>
 </div>