表单输入元素和宽度

Question

一段时间以来，我一直在使用封闭元素的宽度在表格等上布置输入元素，例如div标签然后将％宽度应用于所有表单元素，例如input和textarea。

一些示例标记可能是：

<div class="span4">
    <label>Form Label</label>
    <input type="text" value="My Value"/>
</div>

然后，css将包括：

form input, form textarea {
    width: 95%;
}

我最初提出这个是为了避免在表单元素和块元素上另外指定大小信息。无论如何，通过这种方法，我似乎不断进入这种方便性破坏其他事情的场景，例如：当我在元素旁边放一个按钮时。

我的问题是，是否有任何好的替代方法可以直接在其他人使用的表单元素上放置宽度。

Answer 1

您可以使用属性选择器：

form input[type="text"], form textarea {
    width: 95%;
}

或

form input, form textarea {
    width: 95%;
}
form input[type="button"]{
    width:auto;
}

但是你的做法是正确的：CSS用于定义样式，宽度是样式。

Answer 2

您是否考虑过尝试一些响应式设计框架？如果您在尝试赋予元素可扩展品味时已经使用百分比作为宽度，那么您应该尝试使用twitter引导程序。 （有可能做流体和柱式网格）。之后，您可以专注于个性化您的网站和编程核心功能 - 无需考虑这么多次要/基本布局问题：）