Question

如何使用Pure 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>

ROW1 ：

Bla Bla

<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

将<textarea class="normal pure-u-1" style="height: 75px; overflow: hidden; word-wrap: break-word; resize: horizontal;" name="commento" id="commento"></textarea>类添加到textarea。使用列的整个宽度将是这样的：

class="normal pure-u-23-24"

或者，如果您想在右侧略微保证，您可以使用{{1}}

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>

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

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

3 个答案: