[英]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.