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

Question

如何在以下情况下使用纯 CSS 调整 textarea 的大小，而不破坏表格的整体结构：

标题：

<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"，它不会增加 textarea 的宽度。

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

如何通过不修改div来增加textarea的宽度？

Answer 1

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

Answer 2

pure-u-向文本区域添加一个类。要使用列的全宽，如下所示：

<textarea class="normal pure-u-1" style="height: 75px; overflow: hidden; word-wrap: break-word; resize: horizontal;" name="commento" id="commento"></textarea>

或者如果你想在右边有一点边距，你可以使用class="normal pure-u-23-24"

Answer 3

如果我理解正确，您可以尝试不使用 div，而只使用类显示 textarea：

<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>
<textarea  class="pure-u-1 pure-u-md-1-5" style="word-wrap: break-word; resize: horizontal;" name="commento" id="commento"></textarea>

但是我得到的印象是您希望能够动态调整大于 pure-u-md-1-5 大小允许的文本区域的大小。在这种情况下，您最好使用弹出窗口或类似的东西，只需放置一个按钮即可单击以打开它并编辑文本区域？