表单导致表格宽度错误

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标签。然后，页面上的每个输入、选择和文本区。

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

案子很重要。