在文本框中的起始位置（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>

Answer 1

使用<textarea>和調整它，如果我正確地undestood你，到中心。隨着col屬性，你可以定義textarea的寬度，並與row您可以定義textarea的高度

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

Answer 2

嘗試用textarea的：

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

     </div> 
    </div> 

jsfiddle

Answer 3

您必須使用textarea。

到這裏看看：

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

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>