form_widget 自定义宽度

Question

我正在为任务管理/错误报告应用程序制作一个表单。

我已经编写了代码来添加一个新的错误报告并且它可以工作，现在我想稍微修复一下 HTML，但我在 textarea 的宽度上遇到了一点问题textbox。

<div class="g12">
<form action="{{ path('feedback_create', { 'category': category }) }}" method="post" {{ form_enctype(form) }}>
        <fieldset>
            <label class="handle">Title</br><span class="small">Short Descriptive Title</span></label>
            {{ form_widget(form.title )}}
            <label class="handle">Problematic Steps</br><span class="small">Detailed Steps to Reproduce the Problem</span></label>
            {{ form_widget(form.userNotes)}}
        </fieldset>
    {{ form_rest(form) }}
    <p>
        <button type="submit">Create</button>
    </p>
</form>
</div>

这是我目前拥有的 HTML——它显示了我想要的方式。除了textbox 和文本区域似乎与表格的两侧重叠。我试图清除我的缓存，并将 form_widget 行包装在一个设置宽度的 div 中无济于事......

我已经在 jsfiddle 上创建了基本的 CSS，并且在视觉方面它正在做的事情。

http://jsfiddle.net/758ub/

感谢任何解决此问题的想法或提示。

Answer 1

你的 CSS 有

input, textarea { width: 99%; } /* This is not the cause */

我注意到：

display: none; /* This is not the cause */

在这两个项目（INPUT 和 TEXTAREA）上仍然会保持表单非常宽。这是由于您的 .g12 类宽度值。当我把

.g12 { width: auto; } /* This is a solution */

它缩小了。 在小提琴中，滚动条仍然存在，因为第一个 DIV，宽度为 800px。我想这应该保持不变。

请注意，您应该将此规则放在宽度适用于 .g12 的其他规则之下，或者使选择器更重：

div.g12 { width: auto; }