如何垂直顶部对齐 INPUT 文本元素中的文本？

Question

如何垂直顶部对齐 INPUT 文本元素中的文本？

我有一个高的 INPUT (type=text) 元素，其大小为 100%。包含元素具有特定的高度（这是动态的）。

我想要的是能够将文本放在 INPUT 元素的顶部。我已经看到一些答案使用填充将其垂直居中，但我无法将文本放置在元素的顶部。我无法设置元素的高度。

HTML 示例（或JSFiddle）：

<body>
<div class="outer">
<input type="text" value ="textcontent"></input>
</div>
</body>

Run Code Online (Sandbox Code Playgroud)

和CSS：

body { background-color:gray;}

.outer {
    height:480px;
    background-color:pink;
    margin-top:100px;
}

input {
    height:100%;
    background-color:lightgray;
    padding-top:0px;
    line-height:100px;
}

Run Code Online (Sandbox Code Playgroud)

可以在不设置元素高度的情况下完成此操作吗？我需要支持的浏览器：Chrome、FF、IE9 和 IE11。

谢谢戴夫

Answer 1

小智 6

如果您只想拥有输入元素并实现此目的，请设置padding-bottom而不是 height。

设置高度后，默认情况下文本将显示在元素的中间。

input {
  padding-bottom: 462px;
  background-color:lightgreen;   
}

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/yf5f82vx/1/

归档时间：	11 年，2 月前
查看次数：	7120 次
最近记录：	11 年，2 月前