css - 如何让输入的文本和内容在表格内达到相同的高度？

Question

我试图通过 float 这两个元素来获取描述性文本旁边的输入文本。在使用 float 尝试时，描述性文本基线高于输入基线。如果您在输入中加入破折号，您可以看到它的最佳效果。

不过，尽管使用与描述部分相同的文本/字体标准，但我可以看到输入中的文本正在以某种方式进行转换。它相当狭窄。

有没有人[谁可以帮助我]？

.form_table {
width: 100%;
max-width: 600px;
height: 100%;
max-height: 200px;
border: 1px solid black;
border-collapse: collapse;
}
p{
margin: 0px;
padding: 0px;
text-align: left;
}
input {
border: 0px solid black;
width: 100%;
font-family: Helvetica, "Helvetica Neue", Arial, Calibri, "Myriad Pro", Verdana, "Trebuchet MS", "sans-serif"; 
font-size: 18px;
background-color: none;
}
.form_th {
border: 1px solid black;
padding: 2px;
font-family: Helvetica, "Helvetica Neue", Arial, Calibri, "Myriad Pro", Verdana, "Trebuchet MS", "sans-serif";
font-size: 18px;
font-weight: normal;
}
.output {
text-align: left;
float: left; 
width: 20%;
white-space: nowrap;
}
.input {
float: right;
width: 80%;
}

<form>
<table class="form_table">
<thead>
<tr>
<th class="form_th"><div class="output">Insert a dash_
</div>
<div class="input">
<p><input></p>
</div></th>
</tr>
</thead>
</table>
</form>

Answer 1

如果我理解你将 CSS(输入标签)字体大小更改为 25px；

p{
margin: 0px;
padding: 0px;
font-size: 24px;
}
input {
border: 0px solid black;
width: 100%;
background-color: none;
font-family: "Times New Roman", "Minion Pro", "sans-serif";
 /* add this font size */
 font-size:25px;
}
.command {
text-align: left;
float: left; 
}
.input {
float: left;
text-align: left;
margin: 0px;
padding: 0px;
font-family: "Times New Roman", "Minion Pro", "sans-serif";
font-size= 30px;

}

<form>
<section>
<div class="command">
<p>Insert_</p>
</div>
<div class="input">
<p><input type="text"></p>
</div>
</section>
</form>