如何将输入文本和内容置于表中的同一高度

Question

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

尽管如此，我可以看到输入内部的文本正在以某种方式转换，尽管使用了与描述性部分相同的文本/字体标准。这很狭窄。

有没有人[谁能帮助我]？

.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

如果我理解u中的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>

Answer 2

@lgson带我走上了正确的路径。

而不是浮动，使用display: inline-block; vertical-align: middle;

但是，尽管我希望它对齐左侧，但文本随后出现以中心，因此我在这个乐趣的 align: left周围放了另一个Div-container。将align: left设置为台式标题的同样工作。

最终解决方案就在这里：

.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;
display: inline-block;
vertical-align: middle;
width: 20%;
white-space: nowrap;
}
.input {
display: inline-block;
vertical-align: middle;
width: 60%;
}

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