在一行上对齐不同的多个表单输入答案

【问题标题】：Aligning different multiple form inputs on one line在一行上对齐不同的多个表单输入
【发布时间】：2020-11-28 20:13:29
【问题描述】：

我正在尝试在两种情况下对齐多个表单输入以及一行上的一些文本（垂直对齐：底部，而不是特定对齐）请查看随附的代码，您可以在其中看到所有元素如何对齐不同。

解决此问题的最佳/正确方法是什么？如果有人可以修改代码以使所有元素正确对齐，我将不胜感激。

谢谢。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Sample 1, with vertical align bottom:<br>
<font style="font-size:45px;vertical-align:bottom">????</font>
<input type="text" style="width:100px;height:45px;font-size:45px;vertical-align:bottom">
<input type="checkbox" style="width:45px;height:45px;vertical-align:bottom">
<input type="button" value="Search" style="height:45px;vertical-align:bottom">
<br><br>
Sample 2, without vertical align bottom:<br>
<font style="font-size:45px">????</font>
<input type="text" style="width:100px;height:45px;font-size:45px">
<input type="checkbox" style="width:45px;height:45px">
<input type="button" value="Search" style="height:45px">
</body>
</html>

【问题讨论】：

旁注，<font> 元素已经失效了几十年

标签： html forms input alignment

【解决方案1】：

这是因为所有输入都有不同的边距。尝试将所有输入的边距设置为相同的值。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Sample 1, with vertical align bottom:<br>
<font style="font-size:45px;vertical-align:bottom; margin: 10px;">?</font>
<input type="text" style="width:100px;height:45px;font-size:45px;vertical-align:bottom; margin: 10px;">
<input type="checkbox" style="width:45px;height:45px;vertical-align:bottom; margin: 10px;">
<input type="button" value="Search" style="height:45px;vertical-align:bottom; margin: 10px;">

【讨论】：

这仅解决了示例 1 中复选框的问题。unicode 放大镜仍然未对齐，在示例 2 上它什么也不做：之前：jsfiddle.net/3fnwzqu6 之后：jsfiddle.net/srh45oLd
您可以简单地将 display: inline-block 属性添加到该字体标签。如果要对齐第二个示例中的所有项目，最简单的方法是使用垂直对齐，因为这些元素是内联块。
似乎没什么作用：jsfiddle.net/a4fqo8ey
正如我所说，将 display: inline-block 属性添加到 FONT 标签，并在所有元素中添加用户 vertical-align:bottom。 jsfiddle.net/29z7vhnc