使用HTML中的textarea宽度自动调整表单宽度

Question

我的表格宽度有问题。 要更好地理解它，请查看以下两个图像。

我想用文本区域的长度调整表单的长度，以便文本区域的宽度不长于表单（另请参见屏幕截图2）。你能告诉我我该怎么办？我试图在auto（如高度）上设置文本区域的宽度，但是宽度不起作用。 在下面你可以看到我的代码：

<form role="form" class="row-fluid hide comment popover">
<div class="form-group">
    <label>Comments on Test</label>
    <textarea class="form-control" id="comment_text" form="comment" name="text" placeholder="There is no comment yet"></textarea>
</div>
<div class="form-group">
    <input class="btn btn-default" type='button' value='Submit Comment' onClick='updateComment("@module",this.parentElement)' />
</div>

非常感谢你。

电贺。

Answer 1

您可以将max-width设置为表单元素并仅启用部分宽度更改：

<form>
    <textarea></textarea>
</form>

<script>
    form {background: grey; width: 400px; padding: 20px;}
    textarea {padding:0; background: blue; width: 200px; height: 100px; max-width: 400px;}
</script>

http://jsfiddle.net/y0gp8dtx/

OR

将min-width设置为form元素并添加display: inline-block或float: left以防止默认width: 100%

form {background: grey; min-width: 400px; padding: 20px; display: inline-block;}
textarea {padding:0; background: blue; width: 200px; height: 100px;}

http://jsfiddle.net/y0gp8dtx/2/