表格錯誤，由於表格

Question

我有兩個表格，我已經設計了相同。我已經添加了一個窗體（從JavaScript生成）與自己的造型，它似乎已經搞亂了其中一個表（添加相機表）

小提琴有細節，我已經添加了JavaScript創建：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; 
} 

我在做什麼錯呢？對我來說這兩個表具有相同的樣式，但只有一個表會搞砸是沒有意義的。

Answer 1

你有一個寬度設置，迫使事情擴大。你正在定義#EditCameraForm標籤。然後在頁面上的每個輸入，選擇和textarea。

#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"] 

案事宜。