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

【问题标题】：Text doesn't start from the left top of input text field文本不是从输入文本字段的左上角开始
【发布时间】：2013-03-13 10:16:23
【问题描述】：

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

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/

【问题讨论】：

标签： html css

【解决方案1】：

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

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

它将从左上角添加文本。

【讨论】：

【解决方案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

更新

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

不是从左上角添加文字。
仍然在水平中心，而不是在顶部
我还说过，如果您将其更改为 textarea，它将无法使用输入。
这是text 输入的默认行为。你无法改变这一点。默认情况下，text 输入只能有一行。当您增加元素的高度时，浏览器将强制线条垂直对齐到中心。如果您需要大量输入，请使用textarea。

【解决方案4】：

要左对齐和上对齐，您必须设置一个较小的高度和一个 padding-bottom：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案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]。

【讨论】：