为什么输入字段从字段中心开始？答案

【问题标题】：Why the input field is starting from center of the field?为什么输入字段从字段中心开始？
【发布时间】：2021-12-30 21:25:20
【问题描述】：

光标的初始位置在字段的中心。如何让它在左上角？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">    
</head>
<body style="background-color: cadetblue; height:1000px">
<form>
   <input type="text" class="notes-input" name="note">
</form>
</body>
</html>

.notes-input {
    width: 50%;
    line-height: 8em;
    margin:50px 0px 0px 150px ;
}

【问题讨论】：

您在 css 中给了 50px 作为左边距，并且 line-height: 8em;这就是为什么。减小该行高以使光标指向左上角。
这是输入的默认行为。使用 textarea 可以实现您的预期行为。
即使使用了textarea，样式中的line-height也必须降低，如果高达8em，那么多行文本每行之间会有很大的空白。
使用textarea 代替输入。

标签： html css bootstrap-4

【解决方案1】：

你可以用 textarea 代替 input

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">    
</head>
<style>
.notes-input {
    width: 50%;
    margin:50px 0px 0px 150px ;
}
</style>
<body style="background-color: cadetblue; height:1000px">
<form>
   <textarea type="text" rows="5" class="notes-input" name="note"></textarea>
</form>
</body>
</html>

如果我们只想要输入并且框的大小应该很大意味着我们可以使用下面的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">    
</head>
<style>
.notes-input {
    width: 50%;
    margin:50px 0px 0px 150px ;
    padding-bottom:150px;

}
</style>
<body style="background-color: cadetblue; height:1000px">
<form>
   <input type="text" class="notes-input" name="note">
</form>
</body>
</html>

【讨论】：

你不回答这个问题，你提出了一个替代方案。只有在您解释了为什么需要替代方案时，您才应该这样做。
使用输入框我们只能输入一行文本。如果我们想使用多行文本意味着 textarea 是最好的选择。否则，如果我们只想输入大框尺寸意味着我们可以删除 line-height 并将 padding-bottom 添加到输入字段...
感谢您添加详细信息，您可以编辑您的答案以在您的答案中添加这些信息。这将对社区有所帮助:)
谢谢。我想我应该使用 textarea

【解决方案2】：

使用textarea 代替输入。

&lt;textarea name="textarea" style="width:250px;height:150px;"&gt;&lt;/textarea&gt;

【讨论】：