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

Question

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

CSS

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

HTML

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

这是一个证明问题的jsFiddle＆gt; http://jsfiddle.net/9cR5j/

Answer 1

而不是input为什么你不试试textarea？

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

它将从左上角添加文字。

Answer 2

如果不是删除padding: 0.4em;并设置

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

在此处更改后更改班级名称

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

而不是longInput，它将是wideInput

---

更新

JsFiddle demo with TextArea

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

Answer 3

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

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

Answer 4

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

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

Answer 5

尝试将line-height字段上的input CSS属性设置为与该字段的height相同。

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

Answer 6

正如Pranay Rana所说，您的填充引起了问题，他的回答是正确的。另外，您可以为padding使用快捷方式属性：

padding: 0 0.4rem 0.4rem 0;

这与：

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

它按顺时针顺序获取值，因此先上，右，下然后左。而且，如果您希望文本多行显示，请使用textarea而不是常规的input[type=text]。