Question

我有height: 250px的输入，因为您可以看到其中的文字位于中心。有没有办法将它对齐到左上角？

＆＃13;

#messageBox
{
    width: 200px;
	height: 250px;
}

＆＃13;

<input id="messageBox">

＆＃13;

Answer 1

改为使用<textarea>：

#messageBox{
    width: 200px;
    height: 250px;
}

<textarea id="messageBox"></textarea>

Answer 2

或者，如果您需要输入并且不需要更多行，则可以使用填充代替高度。

例如这段代码，但它看起来很疯狂：

＆＃13;

#messageBox {
  width: 200px;
  padding: 0 0 250px 0;
}

＆＃13;

<input id="messageBox" value="test">

＆＃13;

Answer 3

也许添加填充并让高度自动计算。

我假设您了解textarea。

但是，如果您希望单行input字段具有用于设计的高框目的，它可以做到。

设计注意：此样式允许您将背景图像放置在文本输入区域下方，而无需添加额外的标记，这有时可能很有用。

#messageBox
{
  width: 200px;
  padding-bottom: 250px; /* approximately... */
  background:  0 30px no-repeat url(http://placekitten.com/1000/500);
}

<input id="messageBox" value="Test">

Answer 4

使用box-sizing添加底部填充（以便填充不会增加输入的高度）：

＆＃13;

#messageBox
{
  width: 200px;
  height: 250px;
  padding-bottom: 222px;
  box-sizing: border-box;
}

＆＃13;

<input id="messageBox" />

＆＃13;

Answer 5

将HTML更改为，

<textarea id="messageBox"></textarea>

使用textarea而不是无效输入

Answer 6

HTML

<textarea id="messageBox"></textarea>

CSS

#messageBox
{
width: 200px;
height: 250px;
resize:none
}

http://jsfiddle.net/16sb2rnb/3/

Answer 7

您应该使用textarea元素。

<textarea id="messageBox"></textarea>

http://jsfiddle.net/16sb2rnb/5/

Answer 8

您可以使用<textarea>元素来实现此目的。

Answer 9

正如评论所说，将<input>更改为<textarea>

＆＃13;

#messageBox {
  resize: none;
}

＆＃13;

<textarea id="messageBox" rows="6" cols="50">

＆＃13;

要增加身高，只需向rows

添加更多内容即可

在输入中定位文本

9 个答案: