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

注意＆＃34;名称＆＃34; ...但选择器是....

#EditCameraForm input[name="submit"]

案件很重要。

由于形式，表格宽度错误

1 个答案: