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

【问题标题】：How to increase width of textarea without modifying div?如何在不修改 div 的情况下增加 textarea 的宽度？
【发布时间】：2015-07-15 01:30:50
【问题描述】：

在不破坏表格整体结构的情况下，如何在以下情况下使用纯 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的宽度？

【问题讨论】：

您是否尝试增加 'cols' 属性？ w3schools.com/tags/att_textarea_cols.asp
是的。它不起作用

标签： javascript css yui-pure-css

【解决方案1】：

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

【讨论】：

它将 textarea 带到屏幕的大部分左侧。但就像在代码中一样。文本框位于第 4 行。它不起作用
@fatherazrael 你必须至少有 1 个样式为 position:relative; 的父容器，例如我使用 div {position:relative;}

【解决方案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"

【讨论】：

【解决方案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 大小允许的文本区域的大小。在这种情况下，您最好使用弹出窗口或类似的东西，只需放置一个按钮即可单击以打开它并编辑文本区域？

【讨论】：