让文本在文本输入字段中垂直排列

Question

我正在使用 Foundation 6 框架构建我的页面。我有一个名为 effects.css 的单独样式 sheet，我用它来自定义文本、表格和输入等。

实际上我必须为其设置样式，因为如果没有自定义样式，输入字段将变得巨大且怪异。必须是负责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;
}

这是它的样子：

文本字段中闪烁的文本光标未垂直对齐。

Answer 1

这是一个填充问题。我在输入样式中将填充设置为 0，现在文本正确垂直对齐。

input.small-input{
    width:10em;
    height:2em;
    line-height:2em;
    font-size:.8em;
    color:#000;
    padding:0;
}

让文本在文本输入字段中垂直排列

Getting text to vertically line up within text input field

html

css

forms

zurb-foundation