形式のためにテーブルの幅が正しくない

Question

私は同じスタイルをとった2つのテーブルを持っています。私は自分のスタイリングでフォーム（JavaScriptから生成）を追加しました。テーブルの1つを台無しにしているようです（カメラテーブルを追加してください）

フィドルは詳細を持っており、作成：http://jsfiddle.net/UtNaa/30/

私はこのすべてのコードが、それは、テーブルを修正したフォームから追加削除する場合：

#EditCameraForm label, input, select, textarea { 
    display: block; 
    width: 200px; 
    float: left; 
    margin-bottom: 1em; 
    margin-top: 0.5em; 
} 

#EditCameraForm select { 
    width: 100px; 
} 

#EditCameraForm label { 
    clear: both; 
    color: black; 
    width: 120px; 
    padding-right: 8px; 
    text-align: left; 
    white-space: nowrap; 
} 

#EditCameraForm input[type="button"] { 
    float: right; 
    width: 100px; 
    margin-left: 10px; 
} 

#EditCameraForm input[type="submit"] { 
    float: right; 
    width: 100px; 
} 

#EditCameraForm input[name="submit"] { 
    clear: both; 
} 

#EditCameraForm input[name="camera_status"] + label { 
    clear: none; 
} 

が、私はこれで間違って何をしているのですか？両方のテーブルが同じスタイリングを持っているが、1つのテーブルだけが台無しになるということは私には意味がありませんか？

Answer 1

あなたは物事を拡張するための幅設定を持っています。 #EditCameraFormラベルを定義しています。次に、ページ上のすべての入力、選択、およびテキストエリア。

#EditCameraForm label, input, select, textarea { 
    display: block; 
    width: 200px; /* <------- this line is causing it */ 
    float: left; 
    margin-bottom: 1em; 
    margin-top: 0.5em; 
} 

これらのフォーム入力をターゲットにする必要があります。そうすれば、すべてのページ入力を変更することはありません。そう...

#EditCameraForm label, 
#EditCameraForm input, 
#EditCameraForm select, 
#EditCameraForm textarea { 
    display: block; 
    float: left; 
    width: 200px; 
    margin-bottom: 1em; 
    margin-top: 0.5em; 
} 

また、誤ったセレクタがあります。

<input type="submit" name="Submit" value="Apply"> 

注意 "名前" ...しかしセレクタが....

#EditCameraForm input[name="submit"] 

ケース事項です。