javascript - 在动态生成的 HTML 中使用 CSS 布局标签/输入/选择元素的问题

Question

我有一个在单击按钮后使用 Javascript 生成的表单。我似乎无法使用 CSS 获得正确的布局。

我想要的是每个 label/input 对都在单行上，除了运动检测和电子邮件通知在同一行上。然后让按钮右对齐。以下是演示中的相关代码:

演示:http://jsfiddle.net/h34Hr/29/(点击结果窗口中的“编辑”链接)

HTML:

<div id="editform"></div>
<button id="editbutton" onClick='edit(this, "/ajax_dash","test25645645", "1", "0", "0")'>Edit</button>

CSS:

fieldset {
    background: #2B3D61;
    border: solid 4px black;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

fieldset legend {
    background: #A8CB17;
    border: solid 4px black;
    padding: 6px;
    color: #000000;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

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

select {
    width: 205px;
}

label {
    text-align: right;
    width: 100px;
    padding-right: 2em;
}

脚本:

function edit(t, to, cameraname, cameraquality, camerastatus, emailnotice) {
    var thisrow = $(t).closest('tr'),
        camerahash = thisrow.prop('data-hash');

    thisrow.hide();

    var mydiv = document.getElementById("editform");
    var myForm = document.createElement("form");
    myForm.method = "post";
    myForm.action = to;

    var myfieldset = document.createElement("fieldset");
    var mylegend = document.createElement ("legend");
    mylegend.innerHTML = "Edit camera settings";
    myfieldset.appendChild(mylegend);

    //camera name
    var label = document.createElement("label");
    label.for = "text";
    label.innerHTML = "Camera name: ";
    myForm.appendChild(label);

    var myInput = document.createElement("input");
    myInput.setAttribute("name", "camera_name");
    myInput.setAttribute("value", cameraname);
    myForm.appendChild(myInput);

    //camera quality
    label = document.createElement("label");
    label.
    for = "text";
    label.innerHTML = "Camera quality: ";
    myForm.appendChild(label);

    var mySelect = document.createElement("select");
    mySelect.name = "camera_quality";
    if (cameraquality == 0) {
        cameraquality = "High";
        mySelect.options[0] = new Option(cameraquality, "HIGH", false, true);
        mySelect.options[1] = new Option("Medium", "MEDIUM", false, false);
        mySelect.options[2] = new Option("Mobile", "MOBILE", false, false);
    }
    else if (cameraquality == 1) {
        cameraquality = "Medium";
        mySelect.options[0] = new Option("High", "HIGH", false, false);
        mySelect.options[1] = new Option(cameraquality, "MEDIUM", false, true);
        mySelect.options[2] = new Option("Mobile", "MOBILE", false, false);
    }
    else {
        cameraquality = "Mobile";
        mySelect.options[0] = new Option("High", "HIGH", false, false);
        mySelect.options[1] = new Option("Medium", "MEDIUM", false, false);
        mySelect.options[2] = new Option(cameraquality, "MOBILE", false, true);
    }
    myForm.appendChild(mySelect);

    //camera_status = Motion detection
    label = document.createElement("label");
    label.
    for = "text";
    label.innerHTML = "Motion detection: ";
    myForm.appendChild(label);

    myCheckBox = document.createElement("input");
    myCheckBox.type = "checkbox";
    myCheckBox.name = "camera_status";
    //myCheckBox.value = "On";
    if (camerastatus == 0) {
        myCheckBox.checked = true;
        myCheckBox.title = "Turn motion detection off";
    }
    else {
        myCheckBox.title = "Turn motion detection on";
    }
    myForm.appendChild(myCheckBox);

    //email_notice
    label = document.createElement("label");
    label.
    for = "text";
    label.innerHTML = "Email notice: ";
    myForm.appendChild(label);

    myCheckBox = document.createElement('input');
    myCheckBox.type = "checkbox";
    myCheckBox.name = "email_notice";

    //myCheckBox.value = "On";
    if (emailnotice == 0) {
        myCheckBox.title = "Turn email notice off";
        myCheckBox.checked = true;
    }
    else {
        myCheckBox.title = "Turn email notice on";
    }
    myForm.appendChild(myCheckBox);

    //submit changes button
    mySubmit = document.createElement("input");
    mySubmit.type = "button";
    mySubmit.name = "apply_changes";
    mySubmit.value = "Apply changes"

    myForm.appendChild(mySubmit);

    //cancel changes button
    myCancel = document.createElement("input");
    myCancel.type = "button";
    myCancel.name = "cancel_changes";
    myCancel.value = "Cancel"
    myCancel.onclick = function() { 
        thisrow.show();
    }; 
    myForm.appendChild(myCancel);

    myfieldset.appendChild(myForm);
    mydiv.appendChild(myfieldset);
}

Answer 1

无需对您的 HTML 或 Javascript 进行任何更改，您就可以通过更改 CSS 来实现您正在寻找的内容。 clear 和 float 都有助于调整布局。

演示:http://jsfiddle.net/ThinkingStiff/jdKxd/

CSS:

label {
    clear: both;
    padding-right: 8px;
    text-align: right;
    white-space: nowrap;
    width: 110px;
}

input[type="checkbox"] {
    width: 20px;
}

input[type="button"] {
    float: right;
}

input[name="apply_changes"] {
    clear: both;
}

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