文本字段内容在增加其大小后没有占用空间

Question

我创建了两个html元素，一个文本输入和一个textarea。

为了正确的设计，需要增加磁场的大小。但是当我在字段中输入文本时，它不占用整个空间。

我的文本字段代码：

<label for="exampleForm2">Task Title</label>
<input type="text" id="exampleForm2" class="form-control" style="padding-right: 155px">

我的文字区代码：

<label for="exampleFormControlTextarea1">Task Desciption</label>
<textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="8" style="padding-right: 160px;" name="taskdetails"></textarea>

Answer 1

如果你想要更大，请不要使用padding-right来textarea设置width

textarea{
width:300px
}

<label for="exampleFormControlTextarea1">Task Desciption</label>
                        <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="8"  name="taskdetails"></textarea>

Answer 2

它接缝“padding-right：160px”;是你的问题。删除它并使用“宽度”代替

Answer 3

经过一些研究，我找到了一个解决方案。

只需在两个字段中添加size和cols属性

任务标题字段：

<label for="tasktitle">Task Title</label>
<input type="text" id="tasktitle" class="form-control" size="50" name="tasktitle"> 

Taskdetails字段：

    <label for="taskdetails">Task Desciption</label>
<textarea class="form-control rounded-0" id="taskdetails" rows="8"  name="taskdetails" cols="50"></textarea>