Как получить ввод текста и содержимого на той же высоте внутри таблицы? - PullRequest
Новая
       21

Как получить ввод текста и содержимого на той же высоте внутри таблицы?

0 голосов
/ 19 мая 2019

Я пытаюсь получить текст ввода рядом с описательным текстом, переместив эти два элемента. При попытке сделать это с помощью 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>

Ответы [ 2 ]

0 голосов
/ 20 мая 2019

@ LGSon привел меня на правильный путь.

Вместо числа с плавающей запятой используйте display: inline-block; vertical-align: middle;

Тем не менее, текст затем выровнялся по центру, хотя я хотел, чтобы он был выровнен по левому краю, поэтому я поместил еще один div-контейнер вокруг набора align: left. То же самое работает для установки 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>
0 голосов
/ 19 мая 2019

Если я понял, измените размер шрифта в 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>
...