输入的百分比宽度不起作用

Question

很抱歉，如果这是一个基本问题，但这是我的代码：http://jsfiddle.net/s7wdkxun/

我无法理解为什么这不适用于百分比宽度，而是保持固定像素。

<div style="width: 100%">
    <input class="1">
    <input class="2">
    <input class="3">
</div>

CSS

* {
    margin: 0;
    padding: 0
}
.1 {
    width: 30%;
    margin-right: 10%
}
.2 {
    width: 30%;
    margin-right: 10%
}
.3 {
    width: 20%
}

我哪里错了？

Answer 1

根据W3规范，CSS类不能以数字开头。更改它的名称，它应该工作。

http://www.w3.org/TR/CSS21/grammar.html

Answer 2

与数字无关
不要使用数字启动SELECTOR！

使用：

<input class="one">
<input class="two">
<input class="tree">

Answer 3

如此处Which characters are valid in CSS class names/selectors?所述：

  

...名称必须以下划线（_），连字符（ - ）或者开头   一个字母（a-z），后跟任意数量的连字符，下划线，   字母或数字。有一个问题：如果第一个字符是a   连字符，第二个字符必须是字母或下划线，并且   名称长度必须至少为2个字符。

因此，如果您更新您的班级名称以符合此条件，例如更改为one，two和three它将正常运作。的 JS Fiddle Demo

Answer 4

你不能拥有一个以数字开头的类名...尝试输入1而不是1

Answer 5

您不能使用以数字开头的类。尝试给他们字符串名称