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

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;
}
#decimal_point {
  vertical-align: bottom;  /*align decimal point to bottom*/
}

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

我更新了代码并遇到了这个问题:

Answer 1

您可以使用 CSS vertical-align span 上的属性(property)元素。像这样:

.decimal-box span{
    vertical-align: bottom;  /*align decimal point to bottom*/
    line-height: 0.7; /* If desired, set line-height to 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>