文本框中的起始位置 (html/css)

Question

我正在尝试创建一个文本框，以便用户可以在其中输入一本书的章节。

它开始从一个盒子的中间打字。我该如何解决？

 .TextBox {
  width: 500px;
  height: 50px;
  background: #cccccc;
  margin-left: auto;
  margin-right: auto;
}
.TextBox > h1 {
  font-family: 'Consolas';
  text-align: center;
  padding-top: 10px;
}
#textbox {
  width: 500px;
  height: 200px;
}

 <div class="container">
  <div class="TextBox">
    <h1> Enter text here </h1>
    <form>
      <input type="text" id="textbox">
    </form>

  </div>
</div>

原文由 Orkun Oz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 <textarea> 并将其对齐（如果我理解正确的话）到中心。使用 col 属性，您可以定义文本区域的宽度，使用 row 属性，您可以定义文本区域的高度

 .TextBox {
  width: 500px;
  height: 50px;
  background: #cccccc;
  margin-left: auto;
  margin-right: auto;
}
.TextBox > h1 {
  font-family: 'Consolas';
  text-align: center;
  padding-top: 10px;
}
#textbox {
  width: 500px;
  height: 200px;
  text-align:center;
}

 <div class="container">
  <div class="TextBox">
    <h1> Enter text here </h1>
    <form>
      <textarea cols="80" rows="10" id="textbox" type="text" name="textbox">Lorem ipsum
</textarea>
    </form>

  </div>
</div>

原文由 Rotan075 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您必须使用 textarea 。

看看这里：

https://fiddle.jshell.net/byznwzra/

原文由 Claudio Bonfati 发布，翻译遵循 CC BY-SA 3.0 许可协议