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

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>

我更新了代码后遇到了这个问题：

- Noah Tanenholtz

Answer 1

您可以在标签上使用CSS的vertical-align属性来实现垂直对齐。示例如下：

.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>

- Bryan Elliott

---

从运行这段代码来看，我可以看到它确实将小数点向下移动了，但与两个输入元素的底部并不完全对齐。 - Noah Tanenholtz

我明白了，所以我测试了一下我的应用程序的代码。我遇到的问题是，因为所有内容都居中显示在父级 div 中，小数点（span）被移动得太低了。我发布了一张图片，并更新了代码以符合你的解决方案，这样你就能看到我在说什么了。 - Noah Tanenholtz

@NoahTanenholtz，是的，要帮助你，我需要看到父级div的css。也许你可以创建一个codepen或jsfiddle示例并发送链接给我吗？ - Bryan Elliott

@NoahTanenholtz，哦，我看到你修改了问题。然后你可以将span的line-height调整为1.2。这样应该就可以了。另一个选项是还可以垂直对齐input元素。 - Bryan Elliott

@NoahTanenholtz，你在使用CSS库吗，比如Bootstrap或其他的？如果是的话，请告诉我你正在使用的库和版本。 - Bryan Elliott

Answer 2

所以在尝试了一些关于 span 元素（小数点）的垂直对齐之后，我找到了一个似乎适用于我的应用程序的更好解决方案。我附上了代码片段。

decimal-box span{
    vertical-align: sub;  /* align decimal point to bottom */
}

#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>

您可能在运行代码片段时无法察觉到区别，但这是一个展示它在我的应用程序中正常工作的图片：

- Noah Tanenholtz

Answer 3

你可以将其设置为带有id的div，而不是span。

#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>

- Kai