我正在使用 innerHTML 根据所选选项打印出一些带有一些文本框的 div。
当html打印出来时,尽管我在外部、内部或内联的css中对其进行了编码,但div并没有保持它们的宽度。在 firebug 中,显示的宽度设置为 200 像素,但在视觉上您可以清楚地看到宽度没有应用。在 Firefox 和 Chrome 中测试...
谁能帮我?这是一个JSFiddle:
Javascript:
window.getTickets = function () {
$amountId = document.getElementById('event_tt').value;
$x = document.getElementById($amountId).value;
var div = document.getElementById('booking_area');
div.innerHTML = '<div style="width:750px;clear:both;"><div class="cell" style="width:30%;">First Name</div><div class="cell" style="width:30%;">Last Name</div><div class="cell" style="width:30%;">Email</div></div>';
for (var i = 1; i <= $x; i++) {
div.innerHTML = div.innerHTML + '<div style="width:750px;clear:both;"><div class="cell" style="width:30%;"><input type="text" name="par_fname" id="par_fname"></div><div class="cell" style="width:30%;"><input type="text" name="par_lname" id="par_lname"></div><div class="cell" style="width:30%;"><input type="text" name="par_email" id="par_email"></div></div>';
}
}
CSS:
.cell {
width:200px;
display: inline;
overflow:hidden;
}