javascript - 如何在不修改div的情况下增加textarea的宽度？

Question

如何在不破坏整个表格结构的情况下使用纯 CSS 在以下情况下调整文本区域的大小:

标题:

<div class="pure-u-1 pure-u-md-1-8">
<label class="boldText">Nmbr</label>
</div>
<div class="pure-u-1 pure-u-md-2-5">
<label class="boldText">ques</label>
</div>
<div class="pure-u-1 pure-u-md-1-5">
</div>
<div class="pure-u-1 pure-u-md-1-5">
<label class="boldText">comments</label>
</div>

第 1 行:

布拉布拉

<div class="pure-u-1 pure-u-md-2-5">
One more Bla
</div>
<div class="pure-u-1 pure-u-md-1-5">
One More Bla
</div>
<div class="pure-u-1 pure-u-md-1-5">
<textarea class="normal" style="height: 75px; width:300px; overflow: hidden; word-wrap: break-word; resize: horizontal;" name="commento" id="commento"></textarea>
</div>

问题是 Textarea 保留为使用“pure-u-md-1-5 div”类应用的宽度。

当我尝试增加宽度时，例如 style="width:400px"，它不会增加文本区域的宽度。

如果我尝试增加其 div 的宽度，则文本区域会跳转到下一行。如果我通过将像素从 400px 减少到 490 或 495 来进行调整，那么当我尝试缩放页面时，文本区域也会移动到下一行。

如何在不修改div的情况下增加textarea的宽度？

Answer 1

应用样式 position:absolute;top:0;left:0;