html - 在 HTML 中使用文本区域宽度自动调整表单宽度

Question

我的表单宽度有问题。为了更好地理解它，请查看以下两张图片。

我想根据文本区域的长度调整表单的长度，以便文本区域的宽度不会比表单长(另见屏幕截图 2)。你能告诉我我该怎么做吗？我试图将文本区域的宽度设置为自动(如高度)，但宽度不起作用。在下面你可以看到我的代码:

<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/

或

将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/