如何垂直頂部對齊INPUT文本元素中的文本？

我有一個高大的INPUT（type = text）元素，大小爲100％。包含元素具有特定的高度（這是動態的）。如何垂直頂部對齊INPUT文本元素中的文本？

我想要的是能夠將文本放在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 & IE11。

感謝戴夫

來源

2014-12-02 Badgerspot

爲什麼輸入，而不是textarea的？ – Mainz007 2014-12-02 12:29:47

使用'input'而不是'textarea'的任何具體原因。 – Benjamin 2014-12-02 12:30:42

[垂直對齊固定高度的輸入字段中的文本而不顯示：表或填充？]的可能的副本（http://stackoverflow.com/questions/326650/vertically-align-text-within-input-field-of-固定高度沒有顯示錶） – jbutler483 2014-12-02 12:32:30

如果你想有隻輸入要素和實現這一目標，然後設置填充底，而不是高度。

設置高度後，默認情況下文本將顯示在元素的中間。

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

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

來源

2014-12-02 12:39:50 Bhuvana

我會建議你使用的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; 
}'

來源

2014-12-02 13:18:05 iSqware

謝謝，但我不能使用TEXTAREA，因爲內容僅限於一行。 – Badgerspot 2014-12-02 13:41:21

使用白色空間來修復該空白區域：nowrap; – iSqware 2014-12-02 13:56:46

剛剛意識到它不適用於textarea，對此感到遺憾。 – iSqware 2014-12-02 13:58:32

如何垂直頂部對齊INPUT文本元素中的文本？

回答

相關問題