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

Issues laying out label/input/select elements using CSS in dynamically generated HTML

本文关键字:标签 布局 问题 输入 选择 CSS 元素 动态 HTML      更新时间:2023-09-26

我有一个表单,是在点击一个按钮后用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);
}

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

演示: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;
}