在动态生成的HTML中使用CSS布局标签/输入/选择元素的问题
Issues laying out label/input/select elements using CSS in dynamically generated HTML
我有一个表单,是在点击一个按钮后用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来实现您正在寻找的内容。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;
}
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 使用agility.js进行页面布局和合成
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 如何实现此布局
- 有没有一个javascript图形绘制库可以进行气球树布局
- iframe正在添加标签,需要删除它们
- 如何自动调整标签的高度以适应内容
- vaadin:使用自定义布局集成angular js
- 如何在D3中获得可缩放Icicle布局中文本标签的旋转
- 如何在D3.js基于力的标签布局图中获取公共子节点
- D3 强制布局与文本标签和图标
- D3JS 中强制定向图像和标签布局中的不同图像大小
- 如何在我的力布局 D3 中停止标签交互
- 在D3.js中的动态力布局图中显示节点标签
- 启动d3强制布局折叠,文本标签重复
- 在动态生成的HTML中使用CSS布局标签/输入/选择元素的问题
- 用foreignObject在d3js强制布局中制作可满足内容的标签,并拖动到Chrome上
- 黄金布局:如何增加页眉标签的高度