文本不从输入文本字段的左上角开始

I have an input field with a fixed height. The text is vertically centered, but I want it at the top left of the input.

我有一个固定高度的输入字段。文本是垂直居中的,但我希望它在输入的左上角。

CSS

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

HTML

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

Here's a jsFiddle that demonstrates the problem > http://jsfiddle.net/9cR5j/

这是一个演示问题的jsFiddle> http://jsfiddle.net/9cR5j/

5 个解决方案

#1

if what that than remove padding: 0.4em; and set

如果那比删除填充:0.4em;并设置

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

After doing change change class name here

做了更改之后更改了类名

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

instead of longInput it will be wideInput

而不是longInput它将是wideInput

Update

JsFiddle demo with TextArea

使用TextArea的JsFiddle演示

this will work with textarea only because input is just allow to enter value in one line i.e no enter keyallowed or it doent wrap long text , it just add data in one line

这只适用于textarea,因为输入只允许在一行中输入值,即不输入keyallowed或者它包含长文本,它只是在一行中添加数据

#2

Instead of input why you not try textarea ?

而不是输入为什么你不尝试textarea?

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

It will add text from left top corner.

它将从左上角添加文本。

#3

Your padding is causing the text to begin 0.4em from the left hand side. If you want the text to be truly left-aligned, remove the padding on the left:

您的填充导致文本从左侧开始0.4em。如果您希望文本真正左对齐,请删除左侧的填充:

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

#4

To align left and top you would have to set a smaller height and a padding-bottom:

要对齐左侧和顶部,您必须设置较小的高度和填充底部:

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

#5

Try setting the line-height CSS property on the input field to the same as the height of that field.

尝试将输入字段上的行高CSS属性设置为与该字段的高度相同。

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

#1