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

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如果您希望它更大 r

＆＃13;

＆＃13;

textarea{
width:300px
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

它接着＆＃34; padding-right：160px＆＃34; ;是你的问题。 将其删除并使用＆＃34; width＆＃34; 代替

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>