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

Question

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

CSS

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

HTML

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

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

score 10 · Accepted Answer

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

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

它将从左上角添加文本。

score 4 · Accepted Answer

如果那不是删除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

更新

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

正如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].

6 回答 6