Question

我试图通过浮动这两个元素来获取描述性文字旁边的输入文字。在使用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（输入标签）的font-size更改为25px；

Set-ExecutionPolicy -ExecutionPolicy Unrestricted

$FileType = "*.pdf"
$folder = Get-ChildItem -path "C:\Users\Myname\Documents" -Filter $FileType

$map = @{
    Wertpapierabrechnung = "*$Wertpapierabrechnung*"
    Wertpapierertrag = "*_Wertpapierertrag*"
    Kontoauszug = "*$Kontoauszug*"
    Depotauszug = "*$Depotauszug*"
    Kapitalmaßnahmen = "*$Kapitalmaßnahmen*"
}

ForEach($file in $folder)
{
    $file
    $key = $file.BaseName
    $key
    $map.Keys
    if ($key -like $map.Keys){

        Copy-Item -Path $file.FullName -Destination ### SOME PATH JOINING ###

        }
    else{

    "Copy Item did not work."}
}

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;

}

Answer 2

@LGSon带我走了正确的路。

使用display: inline-block; vertical-align: middle;
而不是float

但是，尽管我希望文本向左对齐，但是文本还是居中显示，所以我在这个有趣的align: left周围放了一个div容器。将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>

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

2 个答案: