動的に生成されるHTMLでCSSを使用してラベル/入力/選択要素をレイアウトする際の問題

Question

ボタンをクリックした後にJavascriptで生成されるフォームがあります。 CSSを使用してレイアウトを正しく取得できないようです。

label/inputのペアは、動き検出と電子メール通知を除き、1行にする必要があります。次に、ボタンを右揃えにします。

デモ：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; 
}