Question

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

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

示例HTML（或JSFiddle）：

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

和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;
}

这可以在不设置元素高度的情况下完成吗？我需要支持的浏览器：Chrome，FF，IE9＆amp; IE11。

由于戴夫

Answer 1

如果你想只有输入元素并实现这一点，那么设置 padding-bottom 而不是高度。

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

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

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

Answer 2

我建议你使用文本输入的textarea insted。

这样，文本将从顶部开始，如果文本具有更宽的字符，则将文本换行。

检查下面的前

Fiddle example

'<body>
 <div class="outer">
 <textarea >textcontent</textarea>
 </div>
 </body>'

'body { background-color:gray;}

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

textarea {
background-color: lightgray;
border: 1px solid #ccc;
box-sizing: border-box;
height: 100%;
line-height: 50px;
max-height: 100%;
padding-top: 0;
resize: none;
}'

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

2 个答案: