Html 文本不是从输入文本字段的左上角开始
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15382422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text doesn't start from the left top of input text field
提问by Marco Dinatsoli
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
CSS
.wideInput{
text-align: left;
padding: 0.4em;
width: 400px;
height: 200px;
}
HTML
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/
采纳答案by Pranay Rana
if what that than remove padding: 0.4em;and set
如果那比删除padding: 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 longInputit will be wideInput
而不是longInput它会wideInput
Update
更新
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，因为 input 只允许在一行中输入值，即不允许输入键或它不包含长文本，它只是在一行中添加数据
回答by Devang Rathod
Instead of inputwhy you not try textarea?
而不是input你为什么不试试textarea？
<textarea class="longInput" cols="30" rows="10"></textarea>
It will add text from left top corner.
它将从左上角添加文本。
回答by BenM
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;
}
回答by Rittmeyer
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;
回答by Dipesh Parmar
Try setting the line-heightCSS property on the inputfield to the same as the heightof that field.
尝试将字段line-height上的CSS 属性设置为与该input字段的相同height。
height:200px; line-height:200px;
