Question

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您必须使用{{1}}。

看看这里：

LoginController

Answer 2

使用<textarea>并将其对齐，如果我不正确的话，将它对准中心。使用col属性可以定义textarea的宽度，使用row可以定义textarea的高度

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

尝试使用textarea：

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

        </div>
    </div>

jsfiddle

Answer 4

您是否希望在下面找到类似内容（当我更改TextArea中的文字时，Heading中的文字将会被更改）。

请检查以下小提琴，并告诉我。

function changeHead()
{
    var x = document.getElementById("txtarea").value;
    document.getElementById("demo").innerHTML = x;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="TextBox">
    <h1 id="demo"> Enter text here </h1>
    <form>
      <textarea id="txtarea" cols="52" rows="6" id="textbox" type="text" name="textbox" onkeypress="changeHead()" placeholder="Enter Text Here">
</textarea>
    </form>

  </div>
</div>

在文本框中开始位置（html / css）

4 个答案: