[英]Getting text to vertically line up within text input field
我正在使用Foundation 6框架来构建我的页面。 我有一个单独的样式表,称为effects.css,可用于自定义文本,表格和输入等。
实际上,我必须对其进行样式设置,因为如果没有自定义样式,则输入字段将是巨大且怪异的。 必须是负责的foundation.css中的某些缩放样式。
我做了一个简短的文本输入字段,但是里面的文本似乎并不想垂直对齐。 光标闪烁并跳出白色文本区域的一半。
这是html:
<form name="quick-connect" id="quick-connect" method="post" action="/ajax/quick-connect-action/" onsubmit="return false;">
<span class="med-text white-text">Your name:</span><input type="text" name="name" id="name" class="small-input" />
<span class="med-text white-text">Your phone #:</span><input type="text" name="number" id="number" class="small-input" />
<input type="submit" name="submit" id="quick-connect-submit" value="Submit" />
<input type="hidden" name="page" value="LCHG" />
</form>
这是我尝试输入字段的CSS:
input.small-input{
width:10em;
height:1em;
line-height:1em;
font-size:.9em;
color:#000;
}
看起来是这样的:
闪烁的文本光标未在文本字段内垂直对齐。
这是一个填充问题。 我在输入样式中将填充设置为0,并且文本现在正确地垂直对齐。
input.small-input{
width:10em;
height:2em;
line-height:2em;
font-size:.8em;
color:#000;
padding:0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.