Text beginnt nicht von der linken oberen Ecke des Eingabe-Textfelds

Question

Ich habe ein Eingabefeld mit einer festen Höhe. Der Text ist vertikal zentriert, aber ich möchte es oben links von der Eingabe.

CSS

.wideInput{ 
    text-align: left; 
    padding: 0.4em; 
    width: 400px; 
    height: 200px; 
} 

HTML

<input class="longInput" value="<?php echo $row['foodPrice']; ?>" /> 

Hier ist ein jsFiddle, dass das Problem>http://jsfiddle.net/9cR5j/

Answer 1

wenn, was das als padding: 0.4em; entfernen und setzen

padding-left:0; 
padding-top:0; 
padding-bottom:0.4em; 
padding-right: 0.4em; 

Nachdem ich Namensänderung Klassenänderung hier

<input class="wideInput" value="<?php echo $row['foodPrice']; ?>" /> 

statt longInput wird es wideInput

0 sein

aktualisiert

JsFiddle demo with TextArea

dies wird nur mit Textbereich arbeiten, weil Eingang nur Wert einzugeben ist damit nicht in einer Zeile dh eingeben keyallowed oder doent langen Text wickeln, es nur Daten hinzufügen, in einer Zeile

Answer 2

Ihre Polsterung der Text 0.4em von der linken Seite beginnen verursacht demonstriert. Wenn Sie den Text, um wirklich linksbündig möchten, entfernen Sie die Polsterung auf der linken Seite:

.wideInput{ 
    text-align: left; 
    padding: 0.4em 0.4em 0.4em 0; 
    width: 400px; 
    height: 200px; 
} 

Answer 3

Statt input warum versuchen Sie nicht textarea?

<textarea class="longInput" cols="30" rows="10"></textarea> 

Es wird Text von der linken oberen Ecke hinzufügen.

Answer 4

nach links ausrichten und oben Sie eine geringere Höhe einstellen würde und ein padding-bottom:

text-align: left; 
padding: 0.4em; 
padding-bottom:190px; 
width: 400px; 
height: 10px; 

Answer 5

Versuchen Sie, die line-height CSS-Eigenschaft auf dem input Feld auf die gleiche wie die height dieses Feldes zu setzen.

height:200px; line-height:200px;